學(xué)習(xí)資源————阮一峰 webpack-demos

webpack命令

根據(jù)webpack.config.js文件打包

webpack – for building once for development
webpack -p – for building once for production (minification)
webpack --watch – for continuous incremental build
webpack -d – to include source maps
webpack --colors – for making things pretty

打包并且在服務(wù)器上運(yùn)行（相當(dāng)于webpack + apache）

webpack-dev-server

entry參數(shù)

輸入源，可多源頭；最后的輸出為bundle.js

entry: './main.js',
entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },

output參數(shù)

輸出位置；

output: {
    filename: 'bundle.js'
  }
output: {
    filename: './dist/[name].js'
  }

module.loader 參數(shù)

babel-loader

編譯加載器；用于轉(zhuǎn)換到相應(yīng)語言版本
babel-preset-es2015重編譯es6

module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }

css-loader 參數(shù)

在js文件中，引用css

module: {
  loaders:[
    { test: /\.css$/, loader: 'style-loader!css-loader' },
  ]
}

image-loader

對在js中引用的圖像進(jìn)行打包;
圖像名稱重命名；小于8192bytes的圖片直接轉(zhuǎn)成dataURL即base64使用

module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }

css-module

css作為模塊引用，具有全局性與非全局性

module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules'
      }
    ]
  }

css文件中的:global()屬性，適用于全局；其余僅適用于引用該css文件的js文件中使用

plugin參數(shù)

配置引入的webpack插件
使用UglifyJs plugin壓縮輸出的bundle.js文件

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]

傳入環(huán)境變量

自定義plugin，使用process.env.CANSHU來控制開發(fā)模式與產(chǎn)品模式的不同分支

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
plugins: [devFlagPlugin]

在項(xiàng)目中設(shè)置DEBUG參數(shù) set DEBUG=true；可以在js中引用DEV參數(shù)

chunk分塊輸出

使用require.ensure定義分離標(biāo)志

// main.js
// require.ensure告訴webpack，./a.js文件應(yīng)該從bundle.js中分離出來，放入單獨(dú)的chunk文件(0.bundle.js)
方法1：
require.ensure(['./a'], function(require) {
  var content = require('./a');
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

方法2：

// 把a(bǔ).js打包到另一個(gè)打包文件中去，是同步操作，獲取這個(gè)js的exports才往下走
var load = require('bundle-loader!./a.js');:

load(function(file) {
  document.open();
  document.write('<h1>' + file + '</h1>');
  document.close();
});

common chunk提取

存在多個(gè)entry源的時(shí)候，使用ommonsChunkPlugin插件，把公共js提取到一個(gè)公共文件
把所有js中的公共部分提取，放進(jìn)新生成的init.js文件中

plugins: [
    new CommonsChunkPlugin('init')
  ]

vendor chunk引入第三方庫

使用vendor集中儲存第三方庫；
通過使用CommonsChunkPlugin插件，在待打包文件中引入了第三方庫如jquery等，存在vendor文件中

entry: {
   app: './main.js',
   vendor: ['jquery'],
},
plugins: [
 new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
]

暴露全局變量

data.js內(nèi)保存全局變量；externals用來暴露data.js中的變量，并且映射；

// data.js
var data = 'Hello World';
var base = 'ni hao';

// webpack.config.js
externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    //  "jquery": "jQuery"
    'data': 'data',
    'data2': 'base'
  }

在js中可以通過require來獲取這些全局變量，可以直接使用

// main.js
var data = require('data');
var base = require('data2');

hot module replacement 熱重載模塊

不需要刷新就可以看到module的變化
方法一：
添加熱模塊替換插件

entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
  ],
plugins: [
    new webpack.HotModuleReplacementPlugin()
],

方法二：
webpack-dev-server --hot --inline
說明
--hot: 添加熱模塊替換插件、切換服務(wù)器到熱加載模式
--inline: 把webpack-dev-server運(yùn)行時(shí)間也打包進(jìn)bundle.js
--hot --inline: also adds the webpack/hot/dev-server entry.