零、入口与输出
//对像语法
entry: {
aa: __dirname + '/src/aa.js', //(chunkName ：path)
bb: __dirname + '/src/bb.js'
},
output: {
filename: '[name]-[hash].js',
path: __dirname + '/dist'
}
//单入口
entry: './src/aa.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist' //绝对路径（__dirname为文件所在目录的绝对路径）
}
//数组
entry: [ './src/aa.js' , './src/bb.js'],
output: {
filename: [变量] + '.js',
path: __dirname + '/dist'
}
一、提取公共代码
plugins:[ new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'aa.js', //忽略则以name为输出文件的名字，否则以此为输出文件名字
chunks: ['aa', 'bb'],
minChunks: true
})
]
name 或者 names：创建的chunk的名称，如果是 names 数组，则相当于为数组里的每个chunk 实例化插件;
filename：输出的 chunk的文件名;
chunks：这是一个元素为 chunk.name的数组，插件将会从这些 chunks 里提取 common chunks（若忽略，所有chunk都被选择）;
minSize：非必填，common chunk 的文件大小至少有 minSize 才会被创建；
minChunks：至少有minChunks个 chunk 共有的代码 才会被提取（Infinity：chunk里引用的模块不会被提取；true：chunk里的所有公共部分都会提取）；
（若想将css从common chunk中 提取出单独的css文件：
loaders:[{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},...]
plugins：[
new ExtractTextPlugin({ filename: '[name].css', allChunks: true }),
]
）
二、加载器
module: {
loaders: [ {
test: /.js$/, loader: 'babel-loader', //必须加‘-loader’
exclude: /node_modules/,
query: { presets: ['es2015'] }
},{
test: /.css$/,
loader: 'style-loader!css-loader'
},{
test: /.scss$/,
loader: 'style-loader!css-loader!sass-loader?sourceMap=true!postcss-loader' //我们需要在js文件里，通过require的方式来引入css，需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。
} ]
}
三、HTML自动引用 JS/CSS
安装 npm install --save-dev html-webpack-plugin
plugins: [ new HtmlWebpackPlugin({
filename: 'views/list.html',
template: 'src/modules/app/list/index.html',
chunks: ['common', 'List'],
hash: true}), ]
/**
*filename - 输出文件名，相对路径output.path
* template - HTML模板，相对配置文件目录
* chunks - 只包含指定的文件（打包后输出的JS/CSS）,不指定的话，它会包含生成的所有js和css文件
* excludeChunks - 排除指定的文件（打包后输出的JS/CSS），比如：excludeChunks: ['dev-helper']
* hash
**/
四、自动添加兼容前缀（使用postcss的autoprefixer插件）
plugins: [ new webpack.LoaderOptionsPlugin({ options: { postcss: function(){ return [ require("autoprefixer")({ browsers: ['ie>=8','>1% in CN'] , //(['Android >= 2.3','ios>=7'])
cascade: true, //美化属性值（冒号对齐） }) ] } } })
也可以配置 postcss.config.js 而不写在plugins里：
module.exports = {
plugins: [
require('autoprefixer')({ /* ...options */ })
]
}
或直接使用autoprefixer-loader：
loaders: [{ test: /.css$/, loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "android>=2.3"]}', //... }]
五、自动刷新
安装 npm install --save-dev webpack-dev-server
配置
devServer: { contentBase: "./public", //本地服务器所加载的页面所在的目录 //colors: true, //终端中输出结果为彩色(新版本已取消该属性) historyApiFallback: true, //不跳转 inline: true, //实时刷新 port : '8008' //默认8080 }
命令：
webpack-dev-server --inline
六、Source Map
devtool: 'eval-source-map' //开发环境 devtool: 'source-map' //生产环境 //具体原理待研究