const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const commonCssLoader = [
MiniCssExtractPlugin.loader,Ï
'css-loader', {
// 还需在package.json中定义browserlist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')]
}
}
]
module.exports = {
// html文件：默认不能使用HMR功能.同时导致问题：html文件不能热更新！！！
// 解决：entry入口修改，将html引入后它的HMR生效（默认不添加 HMR）
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader配置 less/css资源
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
// 处理js资源 在package.json中eslintConfig --》airbnb
// 正常一个文件只能被一个loader处理:
// 当一个文件被多个laoder处理要设置先后顺序enforce参数
{
test: /\.js$/,
exclude: /node_modules/, // 不包含文件
loader: 'eslint-loader',
enforce: 'pre', // 优先执行eslint-loader处理文件
options: {
fix: true,
}
},
{
test: /\.js$/,
exclude: /node_modules/, // 不包含文件
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}]
]
}
},
// 处理图片资源
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
// 处理html中的图片(所以处理html文件中图片)
{
test: /\.html$/,
loader: 'html-loader' // 专门处理html中图片(依赖的commonjs 处理图片的url-loader需设置esModule:false)
},
// 打包排除的其他文件（音视频之类的）
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
laoder: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
// 处理html资源（ 无法处理html中的图片处理）
new HtmlWebpackPlugin({
template: './src/index.html',
//压缩（去空格、注释等）
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: process.env.NODE_ENV // production环境下js自动压缩的
}
/** devtool：source-map 一种提供源代码到构建后的代码映射技术（如果构建后报错，通过映射可以追踪源代码）
* [inline-|hidden-|eval-][nosources-][cheap-[module-]]]source-map
*
* // 提示错误代码准确信息 和 源代码错误位置
* source-map
* inline-source-map 内联 构建速度快 不生成文件
*
* // 错误代码错误原因 无法追踪源代码文件
* hidden-source-map 外部 生成文件xxx.map
*
* // 错误代码错误原因 无法追踪源代码文件
* eval-source-map 内联 每个文件都生产对应的sourceMap文件
*
* // 错误代码错误原因 无源代码错误提示
* nosources-source-map 外部
*
* cheap-source-map 外部
*
* cheap-module-source-map 外部
*
* 内联：不生成sourceMap文件 构建速度快
* 内联：生成sourceMap文件
*/