1、开发环境

/*开发环境配置：能让代码运行运行项目指令：webpack 会将打包结果输出出去npx webpack-dev-server 只会在内存中编译打包，没有输出*/const {resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/js/index.js',output: {//输出的文件名字filename: 'js/built.js',//输出的文件路径path: resolve(__dirname, 'build')},module: {rules: [// loader的配置{// 处理less资源test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},{// 处理css资源test: /\.css$/,use: ['style-loader', 'css-loader']},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',options: {//8kb以下使用base64编译limit: 8 * 1024,name: '[hash:10].[ext]',// 关闭es6模块化esModule: false,outputPath: 'imgs'}},{// 处理html中img资源test: /\.html$/,loader: 'html-loader'},{// 处理其他资源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: 'file-loader',options: {name: '[hash:10].[ext]',outputPath: 'media'}}]},plugins: [// plugins的配置new HtmlWebpackPlugin({//以某个文件为模板template: './src/index.html'})],mode: 'development',devServer: {contentBase: resolve(__dirname, 'build'),compress: true,port: 3000,open: true}};

2、生产环境

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');// 定义nodejs环境变量：决定使用browserslist的哪个环境process.env.NODE_ENV = 'production';// 复用loaderconst commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',{// 还需要在package.json中定义browserslistloader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [require('postcss-preset-env')()]}}];module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: [...commonCssLoader]},{test: /\.less$/,use: [...commonCssLoader, 'less-loader']},/*正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 在执行babel*/{// 在package.json中eslintConfig --> airbnbtest: /\.js$/,exclude: /node_modules/,// 优先执行enforce: 'pre',loader: '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}},{test: /\.html$/,loader: 'html-loader'},{exclude: /\.(js|css|less|html|jpg|png|gif)/,loader: 'file-loader',options: {outputPath: 'media'}}]},plugins: [new MiniCssExtractPlugin({filename: 'css/built.css'}),new OptimizeCssAssetsWebpackPlugin(),new HtmlWebpackPlugin({template: './src/index.html',minify: {collapseWhitespace: true,removeComments: true}})],mode: 'production'};