webpack小知识点13-Development和Production

1.由于开发和线上环境的配置文件不一样，所以我们把配置文件分成两个。webpack.dev.js用于开发，webpack.prod.js用于线上

webpack.prod.js

//webpack.prod.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const Webpack = require('webpack')

module.exports = {
    mode: "production",
    devtool: 'inline-source-map',
    entry:{
        main22 :'./src/index.js',
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname,'dist')
    },
    // optimization: {
    //     usedExports: true
    // },
    //线上不需要devServer
    // devServer: {
    //     contentBase:'./dist',
    //     open:true,//自动打开
    //     port:9000,
    //     hot:true,//要想实现HMR(Hot Module Replacement) 这里需要打开
    //     hotOnly:true,//这里是指即使HMR没有生效 我也不让浏览器自动刷新
    // },
    //htmlWebpackPlugin 会在打包结束后 自动生成一个html文件 并且把打包后js自动引入到这个html
    plugins: [
        new HtmlWebpackPlugin({
            template:'src/index.html'
        }),
         // new Webpack.HotModuleReplacementPlugin(),production模式下不需要了
        new CleanWebpackPlugin(),//在打包前删除dist夹
    ],
    module: {
    rules: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: "babel-loader",
                 // use: {
                 //     loader: "babel-loader",
                 //     options: {
                 //         presets: [
                 //             ["@babel/preset-env",
                 //                 {
                 //                     useBuiltIns:"usage"
                 //                 }
                 //             ]
                 //         ],
                 //         plugins: [[
                 //             "@babel/plugin-transform-runtime" ,
                 //             {
                 //                 "corejs": 2,
                 //                 "helpers": true,
                 //                 "regenerator": true,
                 //                 "useESModules": false
                 //             }
                 //         ]
                 //         ]
                 //     }
                 //
                 // }
             },
            {
                test : /\.(jpg|png|gif|svg)$/,
                use :{
                    loader: "url-loader",
                    options:{
                       // name:'[name].[ext]' //新打包出来的图片：老图片名字.老图片的后缀
                        name:'[name]_[hash].[ext]',
                        outputPath:'images/',
                        limit:20480 //20kb
                    }
                }
            },

            {
                test : /\.scss$/,
                use :[
                    'style-loader',
                    {
                        loader: "css-loader",
                        options:{
                            importLoaders: 2, //启用/禁用或设置在CSS加载程序之前应用的加载程序数
                            // 0 => no loaders (default);
                            // 1 => postcss-loader;
                            // 2 => postcss-loader, sass-loader
                            modules: true,//启用/禁用CSS模块及其配置
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },

            {
                test : /\.css$/,
                use :[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }

        ]
    }
}

webpack.dev.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const Webpack = require('webpack')

module.exports = {
    mode: "development",
    devtool: 'cheap-module-source-map',
    entry:{
        main22 :'./src/index.js',
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname,'dist')
    },
    optimization: {
        usedExports: true
    },
    devServer: {
        contentBase:'./dist',
        open:true,//自动打开
        port:9000,
        hot:true,//要想实现HMR(Hot Module Replacement) 这里需要打开
       // hotOnly:true,//这里是指即使HMR没有生效 我也不让浏览器自动刷新
    },
    //htmlWebpackPlugin 会在打包结束后 自动生成一个html文件 并且把打包后js自动引入到这个html
    plugins: [
        new HtmlWebpackPlugin({
            template:'src/index.html'
        }),
         new Webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),//在打包前删除dist夹
    ],
    module: {
    rules: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: "babel-loader",
                 // use: {
                 //     loader: "babel-loader",
                 //     options: {
                 //         presets: [
                 //             ["@babel/preset-env",
                 //                 {
                 //                     useBuiltIns:"usage"
                 //                 }
                 //             ]
                 //         ],
                 //         plugins: [[
                 //             "@babel/plugin-transform-runtime" ,
                 //             {
                 //                 "corejs": 2,
                 //                 "helpers": true,
                 //                 "regenerator": true,
                 //                 "useESModules": false
                 //             }
                 //         ]
                 //         ]
                 //     }
                 //
                 // }
             },
            {
                test : /\.(jpg|png|gif|svg)$/,
                use :{
                    loader: "url-loader",
                    options:{
                       // name:'[name].[ext]' //新打包出来的图片：老图片名字.老图片的后缀
                        name:'[name]_[hash].[ext]',
                        outputPath:'images/',
                        limit:20480 //20kb
                    }
                }
            },

            {
                test : /\.scss$/,
                use :[
                    'style-loader',
                    {
                        loader: "css-loader",
                        options:{
                            importLoaders: 2, //启用/禁用或设置在CSS加载程序之前应用的加载程序数
                            // 0 => no loaders (default);
                            // 1 => postcss-loader;
                            // 2 => postcss-loader, sass-loader
                            modules: true,//启用/禁用CSS模块及其配置
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },

            {
                test : /\.css$/,
                use :[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }

        ]
    }
}

package.json

以上是可以直接用的 但是webpack.dev.js和webpack.prod.js很多共同代码需要提取出来 ，我们给放到