Eine Zusammenfassung der Webpack2-Wissenspunkte

// webpack1 导出方式module.export = {entry : 'app.js',output : { */... */},/* ... */};

// 可以有两种方式传递当前值，一种是简单传递字符串，另外一种则是传递一个对象// 例如： webpack --env production 控制台打印的就是 'production'，是一个字符串// 而当这样调用时：webpack --env.production --env.size 60，控制台打印的就是 { production : true, size : 60 }var path = require('path'),webpack = require('webpack'),UglifyJsPlugin = new webpack.optimize.UglifyJsPlugin(),plugins = [];module.exports = function(env) {console.log(env);
  if (env === 'production') {plugins.push(UglifyJsPlugin);}return {entry : path.resolve(__dirname, 'js/app.js'),output : {path : path.resolve(__dirname, 'build'),filename : '[name].bundle.js'},module : {rules : [{ test : /\.js|\.jsx$/, loader : 'babel-loader', options : {presets : ["es2015", "react"]} },{ test : /\.css$/,use : ['style-loader', 'css-loader']},{test : /\.less$/,use : ['style-loader', 'css-loader', 'less-loader']}]},plugins : plugins};}// 在package.json中配置两个命令{"dev" : "webpack","build" : "webpack --env production"}

// 在这种情况下，1秒之后会返回配置文件并且执行var path = require('path');module.exports = () => {return new Promise((resolve, reject) => {console.log('loading configuration ...');setTimeout(() => {console.log('loading completed!');resolve({entry : path.resolve(__dirname, 'js/app.js'),output : {path : path.resolve(__dirname, 'build'),filename : '[name].bundle.js'},module : {rules : [{ test : /\.js|\.jsx$/, loader : 'babel-loader', options : {presets : ["es2015", "react"]} },{ test : /\.css$/,use : ['style-loader', 'css-loader']},{test : /\.less$/,use : ['style-loader', 'css-loader', 'less-loader']}]},});}, 1000);});}

// config-amd.jsvar path = require('path');module.exports = {entry : path.resolve(__dirname, 'js/app.js'),output : {path : path.resolve(__dirname, 'build'),filename : '[name].amd.js',libraryTarget : 'amd'},module : {rules : [{ test : /\.js|\.jsx$/, loader : 'babel-loader', options : {presets : ["es2015", "react"]} },{ test : /\.css$/,use : ['style-loader', 'css-loader']},{test : /\.less$/,use : ['style-loader', 'css-loader', 'less-loader']}]}};// config-commonjs.jsvar path = require('path');module.exports = {entry : path.resolve(__dirname, 'js/app.js'),output : {path : path.resolve(__dirname, 'build'),filename : '[name].commonjs.js',libraryTarget : 'commonjs'},module : {rules : [{ test : /\.js|\.jsx$/, loader : 'babel-loader', options : {presets : ["es2015", "react"]} },{ test : /\.css$/,use : ['style-loader', 'css-loader']},{test : /\.less$/,use : ['style-loader', 'css-loader', 'less-loader']}]}};// webpack.config.jsvar configAmd = require('./config-amd.js'),configCommonjs = require('./config-commonjs.js');module.exports = [
    configAmd,configCommonjs
]

var path = require('path');module.exports = {entry : // ....,// ...resolve : {enforceExtension : true}};

// Errorimport './text';// Rightimport './text.js';

module : {// webpack1 way// loaders : [...]// nowrules : [
        ...
    ]}

module : {rules : [{ test : /\.js|\.jsx$/, loader : 'babel-loader' },  /* 如果后面有参数需要传递到当前的loader，则在后面继续加上options关键词，例如：          {             test : /\.js|\.jsx$/,             loader : 'babel-loader',             options : { presets : [ 'es2015', 'react' ] }           }        */  {test : /\.css$/,// webpack1 way// loader : 'style!css'  use : [ 'style-loader', 'css-loader' ]},{test : /\.less$/,use : ['style-loader',     // 默认相当于 { loader : 'style-loader' }{loader : 'css-loader',options : {modules : true}},'less-loader']}]}

loader : 'style!css!less'// equals toloader : 'style-loader!css-loader!less-loader'

module.exports = {...resolveLoader : {moduleExtensions : ["-loader"]}}// 然后就可以继续这样写，但是官方并推荐这样写// 不推荐的原因主要就是为了照顾新手，直接写会让刚接触的童鞋感到困惑// github.com/webpack/webpack/issues/2986use : [ 'style', 'css', 'less' ]

plugins : [new UglifyJsPlugin({souceMap : true,warnings : true})
]

// webpack1 waymodules : {loaders : [{ test : /\.css$/, loader : ExtractTextPlugin.extract('style-loader', 'css-loader', { publicPath : '/dist' })}   
    ]},plugins : [new ExtractTextPlugin('bunlde.css', { allChunks : true, disable : false })
]// webapck2 waymodules : {rules : [{ test : /\.css$/, use : ExtractTextPlugin.extract({fallback : 'style-loader',use : 'css-loader',publicPath : '/dist'})}]},plugins : [new ExtractTextPlugin({filename : 'bundle.css',disable : false,allChunks : true})
]

// webpack1 waydebug : true// webapck2 way // webapck2将loader调试移到了一个插件中plugins : [new webpack.LoaderOptionsPlugin({debug : true})
]

// 在js目录中新增一个main.js// js/main.jsconsole.log('main.js');// webpack1 wayrequire.ensure([], function(require) {var _ = require('./lodash').default;console.log(_);console.log('require ensure');console.log(_.isObject(1));});// webpack2 way// 采用这种方式，需要promise 的 polyfill// 两种方式：// 1. npm install es6-promise --save-dev//    require('es6-promise').polyfill();//// 2. babel方式，在webpack中配置babel插件//    npm install babel-syntax-dynamic-import --save-dev//    options : {//        presets : ['es2015'],//        plugins : ['syntax-dynamic-import']//    }import('./lodash').then(module => {let _ = module.default;console.log(_);console.log('require ensure');console.log(_.isObject(1));});

function route(path, query) {return import(`./routes/${ path }/route`)
        .then(route => { ... })}

npm install webpack-dev-server --save-dev// webpack.config.jsmodule.exports = {// ...,devServer : {contentBase : path.join(__dirname, 'build'),hot : true,compress : true,port : 8080,publicPath : '/build/'},plugins : [new webpack.HotModuleReplacementPlugin()
    ]}

app.js?version=1app.css?version=1

// beforeapp.js?version=0add34app.css?version=1ef4a2// after// change app.js contentapp.js?versoin=2eda1capp.css?version=1ef4a2

{
  "main.js?1.1.11": "main.facdf96690cca2fec8d1.js?1.1.11",
  "vendor.js?1.1.11": "vendor.f4ba2179a28531d3cec5.js?1.1.11"}

npm install webpack-manifest-plugin --save-dev// webpack.config.jsmodule.exports = {entry : { /* ... */ },output : {path : path.resolve(__dirname, 'build-init'),filename : '[name].[chunkhash].js',chunkFilename : '[name].[chunkhash].js'},module : {// ...},plugins : [new htmlWebpackPlugin({title : 'webpack caching'}),new WebpackManifestPlugin()
    ]}

<!DOCTYPE html><html>
  <head><meta charset="UTF-8"><title>webpack caching</title>
  </head>
  <body>
  <div id="container"></div>
  <script type="text/javascript" src="main.facdf96690cca2fec8d1.js?1.1.11"></script><script type="text/javascript" src="vendor.f4ba2179a28531d3cec5.js?1.1.11"></script></body></html>

var path = require('path'),webpack = require('webpack'),htmlWebpackPlugin = require('html-webpack-plugin'),ChunkManifestWebpackPlugin = require('chunk-manifest-webpack-plugin'),WebpackChunkHash = require('webpack-chunk-hash');module.exports = {entry : {main : path.resolve(__dirname, 'js/app.js'),vendor : path.resolve(__dirname, 'js/vendor.js')},output : {path : path.resolve(__dirname, 'build'),filename : '[name].[chunkhash].js',chunkFilename : '[name].[chunkhash].js'},module : {// ...},plugins : [new webpack.optimize.CommonsChunkPlugin({name : ['vendor', 'manifest'],minChunks : Infinity}),new webpack.HashedModuleIdsPlugin(),new WebpackChunkHash(),new htmlWebpackPlugin({title : 'webpack caching'}),new ChunkManifestWebpackPlugin({filename : 'chunk-mainfest.json',manifestVariable : 'webpackManifest',inlineManifest : true})
    ]}