本文共 6642 字，大约阅读时间需要 22 分钟。

webpack

安装

npm install webpack -g

我们还可以直接安装到项目的依赖里，就是写入package.json
npm init
npm install webpack --save-dev

简单一个小案例：

在一个文件夹下新建index.html,main.js以及webpack.config.js文件
index.html:

main.js:

document.write("
Hello World!
")

webpack.config.js:

module.exports = {    entry:"./main.js",    output:{        filename:'./folel.js'    }}

编译操作：

cmd在当前文件夹下输入webpack

多文件编译

module.exports = {    entry:{        bundle1:'./main1.js',        bundle2:'./main2.js'    },    output:{        filename:'[name].js'    }}

两个文件对应编译，main1.js编译成bundle1.js,main2.js编译成bundle2.js,
[name]相当于是一个变量获取entry的对象中的keyname,所以我们把入口文件的属性名写成转换后的文件名；

打包css

loader加载器
npm init
npm install style-loader --save-dev
npm install css-loader --save-dev

1. 安装插件
2. webpack.config中匹配css文件
3. 用loader进行打包

在js文件中引用css文件

require('./app.css')

在配置文件中使用

module.exports={    entry:'./main.js',    output:{        filename:'bundle.js'    },    module:{        loaders:[            {test:/\.css$/,loader:'style-loader!css-loader'}        ]    }}

在module对象中，使用loaders,他是一个数组，里面可以有多个对象；

打包js

npm install uglify-js -g

var webpack = require('webpack')module.exports={    entry:__dirname + '/main.js',    output:{        path:__dirname+'/',        filename:'bundle.js'    },    plugins:[        new webpack.optimize.UglifyJsPlugin({            compress:{                warnings:false            }        })    ]}

__dirname是nodejs中指的是项目的根目录

本地服务器

第一步：
npm install --save-dev webpack-dev-server
或
npm install -g webpack-dev-server

第二步：在工程目录下操作cmd：

webpack-dev-server --progress --colors

如果启动成功你会看到：

D:\MyPro\webpack\05demo>webpack-dev-server --progress --color 10% building modules 1/1 modules 0 activeProject is running at http://localhost:8080/webpack output is served from /Hash: 2843bb12d87ec572f21bVersion: webpack 2.2.1Time: 2260ms    Asset    Size  Chunks                    Chunk Namesbundle.js  324 kB       0  [emitted]  [big]  mainchunk    {
  0} bundle.js (main) 310 kB [entry] [rendered]   [35] ./entry.js 94 bytes {
  0} [built]   [36] (webpack)-dev-server/client?http://localhost:8080 4.9 kB {0} [built]   [37] ./content.js 38 bytes {
  0} [built]   [38] ./~/ansi-html/index.js 4.26 kB {
  0} [built]   [39] ./~/ansi-regex/index.js 135 bytes {
  0} [built]   [78] ./~/strip-ansi/index.js 161 bytes {
  0} [built]   [80] ./~/url/url.js 23.3 kB {
  0} [built]   [81] ./~/url/util.js 314 bytes {
  0} [built]   [82] (webpack)-dev-server/client/overlay.js 3.59 kB {
  0} [built]   [83] (webpack)-dev-server/client/socket.js 856 bytes {
  0} [built]   [85] (webpack)/hot/emitter.js 77 bytes {
  0} [built]   [86] ../~/css-loader!./app.css 233 bytes {
  0} [built]   [88] ../~/style-loader/addStyles.js 7.15 kB {
  0} [built]   [89] ./app.css 901 bytes {
  0} [built]   [90] multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js 40 bytes {0} [built]     + 76 hidden moduleswebpack: Compiled successfully.

这样在

直接放一个app.js启动文件 用node app启动

我们看一个较为完整的demo

var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {    //插件项    plugins: [commonsPlugin],    //页面入口文件配置    entry: {        index : './src/js/page/index.js'    },    //入口文件输出配置    output: {        path: 'dist/js/page',        filename: '[name].js'    },    module: {        //加载器配置        loaders: [            { test: /\.css$/, loader: 'style-loader!css-loader' },            { test: /\.js$/, loader: 'jsx-loader?harmony' },            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}        ]    },    //其它解决方案配置    resolve: {        root: 'E:/github/flux-example/src', //绝对路径        extensions: ['', '.js', '.json', '.scss'],        alias: {            AppStore : 'js/stores/AppStores.js',            ActionType : 'js/actions/ActionType.js',            AppAction : 'js/actions/AppAction.js'        }    }};

ES6语法转译为ES5：

安装 babel-loader：
npm install babel-loader --save-dev
安装转码规则：
npm install babel-preset-es2015 --save-dev

ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个

# npm install --save-dev babel-preset-stage-0# npm install --save-dev babel-preset-stage-1# npm install --save-dev babel-preset-stage-2# npm install --save-dev babel-preset-stage-3

参考格式：

{    test: /\.js$/,    loader: 'babel?presets[]=es2015,presets[]=stage-0'}

编译css

安装css-loader：  # npm install css-loader  --save-dev安装style-loader  # npm install style-loader  --save-dev参考格式：{    test: /\.css$/,    loaders: ['style', 'css', 'autoprefixer']}

编译less

# npm install less --save-dev安装less-loader： # npm install less-loader --save-dev参考格式：{    test: /\.less/,    loaders: ['style', 'css', 'autoprefixer', 'less'],}

使用autoprefixer自动补上浏览器兼容

# npm install autoprefixer-loader --save-dev参考格式：{    test: /\.css$/,    loaders: ['style', 'css', 'autoprefixer']}, {    test: /\.less/,    loaders: ['style', 'css', 'autoprefixer', 'less'],}

编译文件

安装file-loader：     # npm install file-loader --save-dev    参考格式：    {        test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,        loader: 'file-loader?name=[hash].[ext]'    }

编译图片

# npm install url-loader --save-dev  参考格式：  {  test: /\.(png|jpg)$/,  loader: 'url?limit=1200&name=[hash].[ext]'  }

编译JSX

# npm install jsx-loader --save-dev  # npm install babel-preset-react --save-dev  参考格式：  {  test: /\.jsx$/,  loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react']  }

示例源码

在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log('你好世界');
执行命令：webpack 然后找到build目录就看到编译后的文件了

var webpack = require('webpack');  module.exports = {      entry: {          app: './app', //编译的入口文件          index: './index', //编译的入口文件      },      output: {          publicPath: '/build/', //服务器根路径          path: './build', //编译到当前目录          filename: '[name].js' //编译后的文件名字      },      module: {          loaders: [{                  test: /\.js$/,                  loader: 'babel?presets=es2015'              }, {                  test: /\.css$/,                  loaders: ['style', 'css', 'autoprefixer']              }, {                  test: /\.less/,                  loaders: ['style', 'css', 'autoprefixer', 'less'],              }, {                  test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,                  loader: 'file-loader?name=[hash].[ext]'              }, {                  test: /\.(png|jpg)$/,                  loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片              }          ]      },      plugins: [              new webpack.optimize.CommonsChunkPlugin('common.js') //将公用模块，打包进common.js      ],      resolve: {          extensions: ['', '.js', '.jsx'] //后缀名自动补全      }  };

转载地址：http://hmhni.baihongyu.com/