var webpack = require('webpack'); var path = require('path'); var htmlWebpackPlugin = require('html-webpack-plugin'); var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
引入必要的插件和模块
module.exports = { entry: { "index": "./index.js", "common": ['vue', 'jquery', 'underscore', 'backbone'] },
entry 顾名思义就是入口，他是程序的入口，但它同时也是chunk（代码块）构造器。构造有两种方式，上面一种，通过文件内require的模块关系，将文件打包成chunk。下面一种意思就是组成这个chunk的是这几个模块（backbone，underscore等三方模块的定义在下面， vue，jQuery，可以直接通过npm安装）。
这个配置会编译出两个文件，一个当作公共库使用，一个当作网站入口使用。
output: { path: './dist', publicPath: '/path/', filename: '[name].[hash].js' },
很明显，这里是输出文件控制
path: 输出编译后文件路径
publicPath: 在html-webpack-plugin中，中引入脚本的根目录。（生成）
filename: 输出文件名，[name]的意思就是原来chunk代码块叫什么名字就是什么名字，[hash]，文件的哈希值。
例如: 入口文件名叫index，那么它的输出就是index.d87f87sd6fsdgs76gsd967.js
module: { loaders: [ { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, { test: /\.less$/, loader: extractTextWebpackPlugin.extract("style-loader", "css-loader!less-loader") // 配合‘extract-text-webpack-plugin'可以剥离，css }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/, loader: 'url-loader?limite=8192' // limit 是转换base64的文件大小的阀值8兆 }, { test: /\.html$/, loader: 'html-loader' // 可以用来加载模板 } ] },
module 这部分，我不是很了解，只知道这里可以用于loader定义。loaders是一个数组。
test: 定义加载模块的文件名正则表达式
loader: 定义加载模块的加载器
加载器可以多个配合使用，典型的就是style css less，逻辑还是很清晰的，less 转 css 转 样式模块，然后插入文档。
resolve: { root: [ path.resolve(__dirname, 'src/lib') ], extensions: ['', '.js'], alias: { 'underscore': 'underscore.js', 'backbone': 'backbone.js', } },
解析模块功能，用来解析三方模块和一些require不方便的模块。
root: 模块搜索路径数组，告诉webpack从哪里去找模块。我这里定义了一个src/lib路径，我把一些库放在这个路径下面。引用的时候，可以直接require(‘underscore.x.x.x.js');不必加路径。
extensions: 拓展名，设置扩展名后，可以require(‘underscore')，不必加.js，这里一定要设置，否则，webpack-dev-server 会报错，真心坑爹。
alias: 经过上面的设置，已经可以随心所欲引入三方模块了，但是我觉得使用别名的方式更好，更方便管理。在文件中引用公共库的时候避免使用路径的方式，例如require(‘../../lib/ssssss.js')。在别名中定义好即可。
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: '[name].[hash].js', chunks: ['index', 'common'] // extract commonChunk from index & common }), new htmlWebpackPlugin({ template: './index.html', filename: 'index.html', chunks: ['index', 'common'] }), new webpack.ProvidePlugin({ jQuery: "jquery" }), new webpack.optimize.UglifyJsPlugin(), new extractTextWebpackPlugin("style.css", { allChunks: true }) ] };
插件库定义
CommonsChunkPlugin 这个插件就是用于提取公共模块的插件，它从chunks中的若干个chunk代码块中分析出他们公用的模块，并打包成name定义的chunk代码块，你会发现common代码块和入口的common代码块重名，我们可以重新写一个新的名字。也可以不写。假如重名，生成的common.js中包好的模块是entry入口定义的所有模块。[‘vue', ‘jquery', ‘underscore', ‘backbone']，这样也比较好理解，因为我们。
htmlWebpackplugin 插件不是webpack自带的插件，它的作用是根据chunk代码块生成文档，下面的意思就是在index.html中引入index.js代码和common.js代码。
webpack.ProvidePlugin 插件用于有些库，比如bootstrap，打包不会出错，但是放在浏览器下就出问题，原因是bootstrap在初始化的时候要传入全局的jQuery变量，webpack中各模块都是独立的，jquery也是，jQuery无法赋值到window上，导致报错，这时候，这个插件就派上用场了，将jquery模块输出到全局的jQuery变量上。bootstrap不再报错
extractTextWebpackPlugin 这个外部插件可以将css文件独立剥离出来，保存为一个单独的样式文件。