(一) 开发环境
webpack.config.js文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, 'bulid')
},
module: {
rules: [
//处理css文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//处理less文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
//处理css中的图片文件
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
outputPath: 'imgs/',
name: '[hash:8].[ext]',
}
},
//处理html文件中的图片文件
{
test: /\.html$/,
loader: 'html-loader',
},
//处理其他文件
{
exclude: /\.(js|css|less|png|jpe?g|gif|html)$/,
loader: 'file-loader',
options: {
outputPath: 'css/',
}
}
]
},
plugins: [
//以自己的html为模板
new HtmlWebpackPlugin({
template: './src/index.html',
minify:false
}),
//清理构建后的文件夹
new CleanWebpackPlugin()
]
}
(二) 生产环境
-
webpack.config.js文件
const path = require('path'); //使用自己的模板文件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //将css从js文件中抽离 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css压缩 const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); // 定义nodejs环境变量：决定使用browserslist的哪个环境 process.env.NODE_ENV = 'production'; //处理css的配置 const CommonCssLoader = [ { loader:MiniCssExtractPlugin.loader, options:{ //css中图片路径出问题时进行配置 publicPath: '../', // 当前的css所在的文件相对于打包后的根路径dist的相对路径 } }, 'css-loader', { loader: 'postcss-loader', //css兼容处理 options: { ident: 'postcss', plugins: () => [require('postcss-preset-env')()] } } ]; module.exports = { mode: 'production', entry: './src/js/index.js', output: { filename: 'built.js', path: path.resolve(__dirname, 'bulid'), }, module: { rules: [ //处理css文件 { test: /\.css$/, use: [...CommonCssLoader] }, //处理less文件 { test: /\.less$/, use: [...CommonCssLoader, 'less-loader'] }, //处理css中的图片文件 { test: /\.(png|gif|jpe?g)$/, loader: "url-loader", options: { limit: 8 * 1024, outputPath: 'imgs/', name: '[name][hash:8].[ext]', } }, //处理html中的文件 { test: /\.html$/, loader: 'html-loader' }, //处理其他文件 { exclude: /\.(js|html|css|less|png|gif|jpe?g)$/, loader: 'file-loader', options: { outputPath: 'other/' } }, //js语法检查 { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', // 相对于balel-loader优先执行 enforce: 'pre', options: { //自动修复不符合eslint规则的代码 fix: true } }, //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { //按需加载 useBuiltIns: 'usage', //指定core-js版本 corejs: { version: 3 }, //指定兼容性做到那个版本的浏览器 targets: { chrome: '60', //兼容版本大于60的chrome浏览器 firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: false //如果需要压缩html需要这样设置 }), new MiniCssExtractPlugin({ filename: 'css/built.css', //将css抽离到css文件夹中的built.css文件中 }), new OptimizeCssAssetsWebpackPlugin(), ] } -
package.json文件
"browserslist": { "development": [ "last 1 chrome version", "last 1 safari version", "last 1 firefox version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }, "eslintConfig": { "extends": "airbnb-base" }