webpack搭建项目流程(纯干货)

   // 安装依赖 webpack-merge 
   npm install webpack-merge --save-dev 

   // webpack.base.config.js
   
   const path = require("path")

   module.exports = {
       //入口
       entry:{
           app:‘./src/index‘
       },
       output:{
           path:path.resolve(__dirname,"../dist"),
           filename:‘js/[name].js‘,
           publicPath:"/" //打包后的资源的访问路径前缀
       },
       module:{
           rules:[
               {
                   test:/\.jsx?$/,
                   exclude:/node_modules/, // 这个node_modules文件夹里面的js/jsx文件不需要使用babel-loader
                   loader:‘babel-loader‘
                   // babel-loader的参数配置也可以这样写，我们这里是新建一个.babelrc文件的方式来配置
                   // use: {  
                   //     loader: ‘babel-loader‘,
                   //     options: {
                   //     presets: [‘@babel/preset-env‘]
                   //     }
                   // }
               },
               {
                   test:/\.css$/,
                   use:[
                       {
                           loader:"style-loader"
                       },
                       {
                           loader:"css-loader"
                       }
                   ]
               },
               {
                   test:/\.less$/,
                   use:[
                       {
                           loader:"style-loader"
                       },
                       {
                           loader:"css-loader"
                       },
                       {
                           loader:"less-loader"
                       }
                   ]
               }
           ]
       },
   }

   // webpack.dev.config.js
       
   const path = require("path")
   // 安装html-webpack-plugin
   const HtmlWebpackPlugin = require("html-webpack-plugin")
   const webpackBaseConfig = require("./webpack.base.config.js")
   // 根据不同规则合并两个配置项，
   const { merge } = require("webpack-merge")

   module.exports = merge(webpackBaseConfig,{
       // 指定构建环境
       mode: "development",
       plugins:[
           new HtmlWebpackPlugin({
               filename:path.resolve(__dirname,"../dist/index.html"),
               template:path.resolve(__dirname,"../public/index.html"),
               inject:true,// 注入选项 有四个值 true,body(script标签位于body底部),head,false(不插入js文件)
           })
       ]
   })

   // webpack.prod.config.js
   
   const path = require("path")
   // 安装html-webpack-plugin
   const HtmlWebpackPlugin = require("html-webpack-plugin")

   const webpackBaseConfig = require("./webpack.base.config.js")
   const { merge } = require("webpack-merge")


   module.exports = merge(webpackBaseConfig,{
       // 指定构建环境
       mode: "production",
       plugins:[
           new HtmlWebpackPlugin({
               filename:path.resolve(__dirname,"../dist/index.html"),
               template:path.resolve(__dirname,"../public/index.html"),
               inject:true,// 注入选项 有四个值 true,body(script标签位于body底部),head,false(不插入js文件)
               hash:true,//回给script标签中的js文件增加一个随机数 防止缓存 bundle.js?22b9692e22e7be37b57e
               //压缩选项 会有很多选项 可以去npm官网上查看对应的配置
               minify:{
                   removeComments:true,//去注释
                   collapseWhitespace:true,//去空格
                   removeAttributeQuotes:true, // 去属性的引号
               }
           })
       ]
   })
   

   // 最后修改package.json中的打包命令配置文件
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev": "webpack-dev-server --config build/webpack.dev.config.js",
       "build": "webpack --config build/webpack.prod.config.js"
   },

   // 安装插件terser-webpack-plugin
   npm install terser-webpack-plugin --save-dev
   // 因为这个插件只会在生产环境生效也就是说这个配置我们要写在webpack.prod.config.js中
   // webpack.prod.config.js  增加optimization选项 （和plugins/mode平级的）
   // Optimization 这个选项是可以覆盖webpack内置的一些配置 比如 压缩、分包机制等等
   optimization:{
       minimizer:[
           new TerserWebpackPlugin({
               parallel:true,
               sourceMap:false,
               exclude:/\/node_modules/,
               extractComments: true, // 这个选项如果为true 会生成一个app.js.LICENSE.txt文件 存储特定格式的注释
               terserOptions:{
                   warnings:false,
                   compress:{
                       unused:true,
                       drop_debugger:true,
                       drop_console:true
                   },
               }
           })
       ]
   }

    // 安装插件
    npm install mini-css-extract-plugin --save-dev

    // 修改webpack.base.config.js中 增加插件mini-css-extract-plugin 
    plugins:[
        new MiniCssExtractPlugin({
            filename:‘css/[name].css‘,
            chunkFilename:‘css/[id].css‘
        })
    ],
    // 同时要修改css/less的loader  
    // 此处是截取的module --> rules里面的需要修改的代码 
    // 把style-loader注释掉是因为两个会冲突，导致报错
    {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            hmr:true,
                            reloadAll:true
                        }
                    },
                    // {
                    //     loader:"style-loader"
                    // },
                    {
                        loader:"css-loader"
                    }
                ]
            },
            {
                test:/\.less$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            hmr:true,
                            reloadAll:true
                        }
                    },
                    // {
                    //     loader:"style-loader"
                    // },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"less-loader"
                    }
                ]
            }