webpack的打包发布

1.为什么要打包发布？

项目开发完成后，使用webpack对项目进行打包发布的主要原因有以下两点：

1. 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

2. 开发环境下，打包生成的文件不会进行代码压缩和性能优化

2.配置webpack的打包发布

在package.json文件的scripts节点下，新增build命令如下：

"scripts":{
  "dev":"webpack serve",//开发环境中，运行dev命令
  "build":"webpack --mode production"//项目发布时，运行build命令
  }
 

—mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过—mode指定的参数项，会覆盖webpack.config.js中的mode选项。

3.把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下的配置：

 output: {
        path: path.join(__dirname, './fix'), //输出文件的存放路径
        //明确告诉webpack把生成的bundle.js文件存放到fix目录下的js子目录中
        filename: 'js/fire.js' //输出文件的名称

    },

4.把图片文件统一生成到image目录中

修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：

{
                test: /\.jpg|png|gif$/, //匹配图片文件
                use: {
                    loader: 'url-loader', //通过loader属性指定要调用的loader
                    options: { //通过options属性指定参数项
                        limit: 87978,
                        //明确指定把打包生成的图片文件，存储到dist目录下的image文件夹中
                        outputPath: 'image'
                    }

                }

            },

5.自动清理fix目录中的旧文件，可以安装并配置clean-webpack-plugin插件：

//1.安装清理fix目录中的webpack插件
npm install clean-webpack-plugin@3.0.0 -D

//2.按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

//3.把创建的cleanPlugin 插件实例对象，挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin],//挂载插件

6.企业级项目的打包发布

主要流程如下：

• 生成打包报告，根据报告分析具体的优化方案

• Tree-Shaking

• 为第三方库启用CDN加载

• 配置组件的按需加载

• 开启路由懒加载

• 自定制首页内容