一文彻底读懂webpack常用配置
开发环境
const webpack = require("webpack");
const path = require('path')
module.exports = {
// entry: {
// a: './src/0706/a.js',
// c: './src/0706/c.js',
// },
entry: "./src/0707/reactDemo.js",
output: {
filename: '[name]_dist.js',
path: path.resolve(__dirname, 'dist3'),
},
mode: 'development',
devtool: 'source-map',
module: {
rules: [
{
test:/.js$/,
use: 'babel-loader',
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test:/.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: 'file-loader'
},
{
test: /.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10240 * 10
}
}
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
],
},
// plugins: [
// new webpack.HotModuleReplacementPlugin()
// ],
// 在使用devServer的时候，如果hot为true的话，会自动帮我们添加HotModuleReplacementPlugin
// 如果使用自己实现的服务器，就需要自己添加
devServer: {
contentBase: './dist3',
hot: true
}
}
生产环境
const webpack = require("webpack");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// minicssextractplugin 推荐使用cssminimizerwebpackplugin来压缩css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 根据模板生产html，并插入相应的chunk，同时也可以压缩html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除构建产物的插件，注意这里的引入方式
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
// entry: {
// a: './src/0706/a.js',
// c: './src/0706/c.js',
// },
entry: "./src/0707/reactDemo.js",
output: {
// 文件指纹 chunkhash chunk改变就会重新生成
// hash 整个项目有文件改变就会重新生成
// contenthash 文件内容改变才会重新生成
filename: '[name]_[chunkhash:8].js',
path: path.resolve(__dirname, 'dist3'),
},
mode: 'production',
optimization: {
minimizer: [
// 压缩CSS
new CssMinimizerPlugin(),
// webpack5内置了terser-plugin，但是上面的插件会覆盖掉默认的terser-plugin，所以通过下面的一行来将默认的插件加回去
'...'
]
},
module: {
rules: [
{
test:/.js$/,
use: 'babel-loader',
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test:/.less$/,
use: [
// 使用miniCssExtractPlugin提取css后，这里需要替换成它的loader
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]'
}
}
},
{
test: /.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10240 * 10
}
}
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
],
},
plugins: [
new MiniCssExtractPlugin({
// 使用contenthash 这样如果只改变了js的话css也无需重新生成
filename: '[name]_[contenthash:8].css'
}),
new HtmlWebpackPlugin({
// 模板所在路径
template: path.resolve(__dirname, 'src/index.html'),
// 生成的html的名字
filename: 'index2.html',
// 用到了哪个chunk
// chunks: ['a']
// 压缩选项
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: true
}
})
]
}
参考webpack视频讲解：进入学习
自动添加CSS前缀
- 使用postcss-loader + autoprefixer
- 添加postcss.config.js 新版本直接在webpack配置文件里添加会报错，所以需要写到一个独立的配置文件里
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
})
]
}
- 添加loader
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader' // 这里为新加的loader
]
},
移动端适配 css px自动转rem
- 使用手淘lib-flexible 动态计算font-size
// 将lib-flexible静态内联到html上，因为要最先执行计算
// 在头部加入如下代码
// 使用了raw-loader，相当于在对应的位置是插入字符串
// 需注意raw-loader新老版本引入的差异