webpack.dev.js

 1 const merge = require('webpack-merge')
 2 const common = require('./webpack.base.js')
 3 const path = require('path')
 5 module.exports = merge(common, {
 6     mode: 'development',
 7     output: {
 8         path: path.resolve(__dirname, 'dist'),
 9         filename: 'main.js'
10     },
11     devtool: 'source-map',
12     module: {
13         rules: [
15             {
16                 test: /\.(c|le)ss$/,
17                 use: [
18                     'style-loader',
19                     {
20                         loader: 'css-loader',
21                         options: {
22                             modules: true
23                             // localIdentName: '[name].[hash:5]'
24                         }
25                     },
26                     'less-loader'
27                 ]
28             },
29             {
31             }
32         ]
33     },
34     devServer: {
35         contentBase: path.join(__dirname, 'dist'),
36         compress: true,
37         port: 8090,
38         hot: true,
39         open: true,
40         proxy: {
41             '/m-api': {
42                 target: 'http://47.98.159.95',
43                 changeOrigin: true,
44                 ws: true
45             }
46         }
47     }
49 })

webpack.pro.js

const common = require('./webpack.base.js')
const merge = require('webpack-merge')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css 压缩插件
const OptimizeCSSAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩js插件，但是该插件不支持es6语法
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// 也可以压缩js，而且支持es6语法
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = merge(common, {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: 'js/[name].js'
    module: {
        rules: [
                test: /\.(css|less)$/,
                use: [
                    // css 把css文件抽取到单独的目录
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        loader: 'css-loader',
                        options: {
                            modules: true
                    'less-loader'
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css',
            chunkFilename: '[name].[hash:5].css'
            // chunkFilename: '[name].chunk.css',
            // chunkFilename: "[id].css",
    // 优化
    optimization: {
        minimize: true, // 默认值为 true ， 执行默认压缩
        // 使用第三方的压缩插件，也可以在optimization.minimizer的数组列表中进行配置
        minimizer: [
            // css 压缩
            // new OptimizeCSSAssetsWebpackPlugin(),
            // js 压缩, 此插件不支持es6的语法，所以需要使用 terser-webpack-plugin 替换掉 uglifyjs-webpack-plugin
            // new UglifyjsWebpackPlugin({
            //     cache: true,
            //     parallel: true, // 单词翻译 平行线 对比
            //     sourceMap: true
            // }),
            // 使用 TerserWebpackPlugin 替换掉 UglifyjsWebpackPlugin 插件
            new TerserWebpackPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
        // chunk 块，配置后会多生成一个 js 文件
        // runtimeChunk: {
        //     name: 'manifest'
        // },