标签：install ima 参数 href write code 运行 web 1.3
参考链接：http://www.runoob.com/w3cnote/webpack-tutorial.html
Webpack 是一个前端资源加载/打包工具。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
1.1使用淘宝 NPM 镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2使用 cnpm 安装 webpack
cnpm install webpack -g
1.3接下来我们创建一个目录 app
mkdir app
1.4在 app 目录下添加 runoob1.js 文件，代码如下：
document.write("It works.");
1.5在 app 目录下添加 index.html 文件，代码如下：
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
1.6接下来我们使用 webpack 命令来打包(先进入app文件夹)
1.7在浏览器访问，输出结果如下所示
1.8接下来我们创建另外一个 js 文件 runoob2.js，代码如下所示
module.exports = "It works from runoob2.js.";
1.9更新 runoob1.js 文件，代码如下
document.write(require("./runoob2.js"));
1.10接下来我们使用 webpack 命令来打包
webpack runoob1.js bundle.js
在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换
2.1使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)
cnpm install css-loader style-loader
2.2接下来创建一个 style.css 文件，代码如下
body { background: yellow; }
2.3修改 runoob1.js 文件，代码如下：(打包后报错!)
require("!style!css!./style.css");
document.write(require("./runoob2.js"));
2.4采用配置文件的方法，创建 webpack.config.js 文件，代码如下所示（其中红色部分，必须加-loader，否则报错！！）
module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] } };
2.5打包成功
2.6浏览器显示结果
插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工作。
使用内置插件需要通过以下命令来安装
cnpm install webpack --save-dev
比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js
var webpack=require(‘webpack‘); module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin(‘菜鸟教程 webpack 实例‘) ] };
进入app文件执行webpack
打开 bundle.js，可以看到文件头部出现了我们指定的注释信息
标签：install ima 参数 href write code 运行 web 1.3
原文地址：http://www.cnblogs.com/yujihang/p/6771506.html
