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

项目优化

这一部分我们会使用一些常用的插件来优化我们的构建流程，提升我们的构建时间和减少我们构建包体积大小

区分不同环境

我们日常工作中都是存在好几套环境的，测试环境、预生产环境、生产环境等等。因此在不同环境使用不同的配置项是有必要的。比如我们在测试环境没有必要压缩我们的代码，这样调试起来比较方便等等。下面我们来看一下区分不同环境需要怎么搞？

第二种方法：生成不同的配置文件，执行相应的命令来执行不同的配置文件

首先我们复制一份webpack.config.js，然后分别命名为webpack.dev.config.js和webpack.prod.config.js 分别对应我们在development和production环境的配置，但是我们发现他们之前有很多的共同配置，因此我们还有把共同的配置抽离出来webpack.base.config.js文件。然后通过webpack-merge插件把他们合并起来。 具体实现如下：

   // 安装依赖 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"
   },

压缩js

原来我们构建的时候压缩js使用的是uglifyjs-webpack-plugin，但是webpack4以后官网推荐使用terser-webpack-plugin terser-webpack-plugin 也是webpack 4的内置插件(也就是说我们不需要自己添加这个插件就可以压缩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
                   },
               }
           })
       ]
   }

提取css文件/压缩css

提取css文件

我们可以看一下我们打包生成的文件，是没有css文件的，因为webpack默认会把css当做一个模块打包到相应的js文件中去， 但是这样的话也导致我们的bundle文件比较大，所以把css单独拆分出来是有必要的。
在这里我们提取单独的css文件使用的插件是：mini-css-extract-plugin（该插件同样只在生产环境下生效）

具体的配置如下：

    // 安装插件
    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"
                    }
                ]
            }