const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const DEVELOPMENT = 'development'
const PRODUCTION = 'production'
module.exports = {
mode: DEVELOPMENT,
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/[name].[contenthash:10].js',
},
target: 'web',
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader, // 将css单独提成文件
'css-loader',
{
// css 兼容处理 postcss，注意需要在package.json配置browserslist
loader: "postcss-loader",
options: {
postcssOptions: {
ident: "postcss",
// postcss-preset-env插件：帮postcss找到package.json中的
// browserslist配置，根据配置加载指定的兼容性样式
plugins: [() => [require("postcss-preset-env")()]],
},
},
},
],
},
{
//处理图片资源
test: /\.(jpe?g|png|gif|)$/,
type: "asset",
generator: {
// 输出文件位置以及文件名
filename: "images/[name][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 //超过10kb不转base64
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
// 注意需要在package.json配置browserslist，否则babel-loader不生效
// js兼容处理 babel
loader: "babel-loader", // 规则只使用一个loader时推荐写法
options: {
presets: [
[
"@babel/preset-env",// 预设：指示babel做怎么样的兼容处理
{
useBuiltIns: "usage", //按需加载
corejs: {
version: "3",
},
}
]
]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({// 生成入口index.html
template: './src/index.html'
}),
new MiniCssExtractPlugin({ // 将css单独提成文件
filename: 'css/index.[contenthash:10].css'
}),
new optimizeCssAssetsWebpackPlugin(), // 压缩css
],
devServer: {
contentBase: path.join(__dirname, 'bulid'),
compress: true,
port: 9000,
hot: true,
},
resolve: {
alias: {
'@': path.resolve('src'),
}
},
optimization: { // 将node_moduleds中的代码单独打包成chunk输出，并分析多入口中是否有公共库（如jquery）如果有，复用
// 触发代码分割必须满足2个：1.production环境 2.用es模块
splitChunks: {
chunks: 'all'
}
}
// source map 能让你再报错时，定位到源代码的位置
// devtool: 'eval-source-map'
};
