/**
* 准备工作
* 全局安装 npm i webpack@4.46.0 webpack-cli -g
* 开发依赖 npm i webpack@4.46.0 webpack-cli -D
*/
/**
* css css-loader@3.4.0 style-loader@1.1.1
* 1. MiniCssExtractPlugin将css从js中剥离出成单独的css文件，由之前的style变成link引入样式（mini-css-extract-plugin@1.0.0）
* 2. css兼容性处理（postcss-loader@3.0.0 postcss-preset-env@6.7.0读取package.json中 browserslist 配置）
* 3. 压缩css(optimize-css-assets-webpack-plugin@5.0.3)
*/
/**
* less
* less@2.7.3 less-loader@5.0.0 css-loader@3.4.0 style-loader@1.1.1
*/
/**
* js
* 1.语法检查（ eslint@6.8.0 eslint-loader@3.0.3 eslint-config-airbnb-base@14.2.1 eslint-plugin-import@2.24.0）(eslintConfig:{extend:airbnb-base})
* 2.js兼容性处理（babel-loader@8.0.6 @babel/core@7.15.0 @babel/preset-env@7.0.0 core-js@2.6.12）
* 3.压缩 mode: 'production', 会自动压缩js
*/
/**
* html html-webpack-plugin@3.2.0
* 压缩
* collapseWhitespace:true,
* removeComments:true
*/
/**
* 处理css中图片
* url-loader@4.1.1 file-loader@5.0.2
*/
/**
* html中的图片img
* html-loader@0.5.5
*/
/**
* 处理 非图片 非html 非js 非css文件 如字体文件等
* file-loader@5.0.2
*/
//设置nodejs环境变量
process.env.NODE_ENV = "development"
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/build.js',
path: resolve(__dirname, "build")
},
module: {
rules: [
{
test: /\.css/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
//设置css里面访问图片资源的前缀
publicPath: '../'
}
},
// 'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
},
{
test: /\.less/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
//设置css里面访问图片资源的前缀
publicPath: '../'
}
},
// 'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
},
'less-loader'
]
},
{
test: /\.(jpeg|png|gif|jpg)$/,
loader: 'url-loader',
options: {
// 小于1M才base64
limit: 1 * 1024 * 1024,
esModule: false,
name: '[hash:6].[ext]',
outputPath: 'imgs'
}
},
// 处理html中的img图片
{
test: /\.html$/,
loader: 'html-loader'
}
,
//打包 排除js/png/css/less等其他资源
{
exclude: /\.(css|less|html|js|png|jpg|jpeg)$/,
loader: 'file-loader',
options: {
name: '[hash:8].[ext]',
outputPath: 'media'
}
},
// 开启eslint校验
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: "pre",
options: {
// 自动修复
fix:true
}
}
,
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets:[
// '@babel/preset-env'
['@babel/preset-env',{
useBuiltIns:'usage',
// corejs:{
// version:2
// },
targets:{
chrome:'99'
}
}]
]
}
},
]
},
plugins: [
new HtmlWebpackPlugin(
{ template: './src/index.html',
minify:{
//去掉空格和去掉注释
collapseWhitespace:true,
removeComments:true
}
}
),
//剥离出成单独的css文件
new MiniCssExtractPlugin(
{ filename: "css/[name].css" }
),
//压缩css文件aaaaaaa
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development',
// mode: 'production',
//开发服务器：监视源文件变化自动编译 自动刷新浏览器 自动打开浏览器 内存中打包
//启动devServer指令:webpack-dev-server 需要的包：npm i webpack-dev-server -g
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
}
