首页 > 代码库 > webpack 小记
webpack 小记
零、入口与输出
//对像语法
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‘ //生产环境 //具体原理待研究
webpack 小记