- entry:对象,字符串, 数组(数组会被打包成一个文件,正确的多入口多出口应该使用对象形式)
- output: path-目标输出的绝对路径,filename-输出文件的文件名:[name],[hash],[chunkhash]
module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), publicPath: 'dist/' } }
- plugin:插件 html-webpack-plugin自动生成html代码。
- filename,inject (放置script标签的地方,head,body,false,true),template,title(htmlWebpackPlugin.options.title可以在html模板里面取值),minify(压缩,值为一个对象,不可以直接写true,具体配置参考文档),chunks:引入的js, 我们entry入口的key值,excludeChunks:排除的chunks;
plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: './index.html', inject: 'body', chunks: ['one'], minify: { removeComments: true, removeAttributeQuotes: true } }) ]
- loader:预处理。处理从右到左(所有laoder都可以使用options来传入参数)
{ loader: '', options: { XX: xx } }
- css-loader: 处理css文件里面的@import和url之类的
- style-loader:将css文件的内容插入style标签内并插入head中
- babe:presets指定javascript版本,excludes和includes优化速度。babel-loader @babel/core @babel/preset-env这三个都需要安装
{ test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }
- postcss-loader:使用javascript的工具或者插件来预处理css的工具。
- postcss可以使用的常见插件:https://www.zcfy.cc/article/7-postcss-plugins-to-ease-you-into-postcss-603.html
module: { rules: [ { test: /.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', { loader: 'postcss-loader', options: { plugins: [ autoprefixer({ overrideBrowserslist: ['last 10 versions'] }) ] } }, ] }, ] }
- css文件使用@import引入的文件,需要给cssloader加上参数importLoaders=1才可以让引入的文件也添加浏览器前缀,less和scss文件不需要
webpack执行命令可以携带的参数
使用实例:webpack --progres --colors --xxx
- --watch 监听变动并自动打包
- --progress 显示进度条
- --config XXX.js 指定特定的打包文件来进行打包
- --color 添加颜色
- 自定义参数