Vue学习6-(webpack发布策略)

布满荆棘的人生 2023-03-14 03:17 129阅读 0赞

> [上一篇 Vue学习5-(webpack)][Vue_5-_webpack]  
> [下一篇 Vue学习7-MinUI组件与项目托管到码云上][Vue_7-MinUI]

--------------------

### webpack发布策略 ###

*  一、开发阶段配置webpack
 *  二、webpack的发布策略
 *   *  1、在实际开发中，一般会有两套项目方案：
     *  2、新建webpack.publish.config.js文件
     *   *  package.json
     *  3、修改url-loader，将图片放入统一的images文件夹之下：
 *  三、每次重新构建时候删除dist目录
 *  四、分离第三方包改造webpack.publish.config.js
 *   *  1、改造entry节点如下：
     *  2、在plugins节点下新增插件：
     *  3、html-webpack-plugin在生成index.html文件的时候，会自动将抽离的第三方包引入进去！
 *  五、优化压缩JS
 *  六、优化压缩HTML文件
 *  七、抽取CSS文件
 *  八、压缩抽取出来的CSS文件
 *  九、完整的webpack.publish.config

# 一、开发阶段配置webpack #

1.  创建webpack.config.js的配置文件
    
     *  entry 指定项目的入口
     *  output 输出相关的配置
     *  plugins 和插件有关
     *  module 和第三方loader相关
     *  rules 第三方loader的匹配规则
2.  安装了工具webpack-dev-server
3.  html-webpack-plugin
4.  处理第三方文件：安装并配置第三方的loader  
    style-loader css-loader 【style-loader css-loader】  
    style-loader css-loader less-loader 【less-loader less】  
    style-loader css-loader sass-loader 【sass-loader node-sass】  
    url-loader 【url-loader file-loader】  
    babel-loader 同时要添加exclude排除项 【babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0】

# 二、webpack的发布策略 #

## 1、在实际开发中，一般会有两套项目方案： ##

一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除；
    另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！

## 2、新建webpack.publish.config.js文件 ##

为了满足我们的发布策略，需要新建一个配置文件，命名为`webpack.publish.config.js`，将webpack.config.js的配置拷贝过去，然后在package.json中的追加“pub”，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

### package.json ###

{
      "name": "webpack-study",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --host 127.0.0.1 --hot",
        "pub": "webpack --config webpack.publish.config.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-stage-0": "^6.24.1",
        "clean-webpack-plugin": "^0.1.17",
        "css-loader": "^0.28.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.6",
        "html-webpack-plugin": "^2.30.1",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "node-sass": "^4.7.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.1",
        "url-loader": "^0.6.2",
        "vue-loader": "^13.6.0",
        "vue-template-compiler": "^2.5.13",
        "webpack": "^3.10.0",
        "webpack-dev-server": "^2.9.7"
      },
      "dependencies": {
        "axios": "^0.17.1",
        "mint-ui": "^2.2.13",
        "vue": "^2.5.13",
        "vue-router": "^3.0.1"
      }
    }

## 3、修改url-loader，将图片放入统一的images文件夹之下： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

# 三、每次重新构建时候删除dist目录 #

1.  运行 `npm i clean-webpack-plugin --save-dev`
2.  在头部引入这个插件：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]
3.  在plugins节点下使用这个插件：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

# 四、分离第三方包改造webpack.publish.config.js #

## 1、改造entry节点如下： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]

## 2、在plugins节点下新增插件： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

## 3、html-webpack-plugin在生成index.html文件的时候，会自动将抽离的第三方包引入进去！ ##

# 五、优化压缩JS #

[https://webpack.js.org/configuration/plugins/\#plugins][https_webpack.js.org_configuration_plugins_plugins]

在plugins数组中添加：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]

# 六、优化压缩HTML文件 #

在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]

# 七、抽取CSS文件 #

1.  运行 `npm install --save-dev extract-text-webpack-plugin` 安装抽取CSS文件的插件。
2.  在配置文件中导入插件：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]
3.  修改CSS和Sass的loader如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]
4.  在plugins节点下新增插件：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]

# 八、压缩抽取出来的CSS文件 #

1、运行 `npm i optimize-css-assets-webpack-plugin --save-dev` 安装插件到开发依赖。  
2、在配置文件头部导入插件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]  
3、在plugins节点下新增插件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]

# 九、完整的webpack.publish.config #

const path = require('path')
    // 1. 导入 在内存中生成页面的webpack插件
    const htmlWebpackPlugin = require('html-webpack-plugin')
    // 导入删除文件夹的 插件
    const cleanPlugin = require('clean-webpack-plugin')
    // 导入 webpack 这个模块
    const webpack = require('webpack')
    // 导入抽取CSS样式文件的插件
    const extractTextPlugin = require('extract-text-webpack-plugin')
    // 导入优化压缩CSS样式表的插件
    const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    
    
    // 使用Node语法，向外暴露配置对象，从而，让webpack运行的时候，加载指定的配置
    // 为什么可以使用Node语法？因为 webpack 这个工具，就是基于node构建的；
    module.exports = { 
      entry: { 
        app: path.join(__dirname, './src/main.js'), // 这是项目的主入口文件
        vendors: ['jquery'] // 这是第三方包的名称
      }, // 项目的入口文件
      output: { 
        path: path.join(__dirname, './dist'), // 输出路径
        filename: 'js/index.js' // 输出文件名
      }, // 打包好的文件的数据配置
      plugins: [ // 插件配置节点
        new htmlWebpackPlugin({  // 创建一个 htmlWebpackPlugin 的实例对象
          template: path.join(__dirname, './src/index.html'), // 指定模板页面路径
          filename: 'index.html', // 指定内存中生成的HTMl文件名称
          minify: {  // 表示提供压缩选项
            removeComments: true, // 移除页面中的注释
            collapseWhitespace: true, // 合并空白字符
            removeAttributeQuotes: true // 移除属性节点上的引号
          }
        }),
        new cleanPlugin(['dist']), // 指定每次重新发布的时候，要先删除的文件夹
        new webpack.optimize.CommonsChunkPlugin({  // 抽离第三方包的插件
          name: 'vendors', // 指定要从哪个入口名称中抽离文件
          filename: 'js/vendors.js' // 指定抽离出来的第三方包，文件名叫做什么
        }),
        new webpack.optimize.UglifyJsPlugin({ 
          compress: { 
            warnings: false // 压缩完毕的代码中，移除警告信息
          }
        }),
        new webpack.DefinePlugin({  // 此插件的作用，相当于在项目的全局，配置了一些全局可用的变量；将来，我们引用的第三方包中，比如Vue，会检查webpack中有没有提供 process.env.NODE_ENV 字段，如果有，并且字段的名字为 "production"， 就表示是生产发布环境，那么会移除不必要的Vue警告功能；并做其它优化！
          'process.env.NODE_ENV': '"production"',
          'myVar': '"1234"'
        }),
        new extractTextPlugin('css/styles.css'), // 抽取CSS文件到单独的目录中
        new optimizeCSSAssetsPlugin() // 自动压缩CSS
      ],
      module: {  // 用来配置 非JS文件对应的loader的
        rules: [ // 就是这些 非 JS 文件 和 loader 之间的对应关系
          { 
            test: /\.css$/, use: extractTextPlugin.extract({ 
              fallback: 'style-loader',
              use: ['css-loader'],
              publicPath: '../' // 表示，如果将来生成的样式中，包含 路径，那么，需要自动在路径前面加上 ../ 前缀
            })
          }, // 创建处理 css 文件的 loader 匹配规则
          { 
            test: /\.less$/, use: extractTextPlugin.extract({ 
              fallback: 'style-loader',
              use: ['css-loader', 'less-loader'],
              publicPath: '../'
            })
          }, // 配置处理less文件的规则
          { 
            test: /\.scss$/, use: extractTextPlugin.extract({ 
              fallback: 'style-loader',
              use: ['css-loader', 'sass-loader'],
              publicPath: '../'
            })
          }, // 配置 处理 scss 文件的规则
          {  test: /\.jpg|png|gif|bmp$/, use: 'url-loader?limit=7631&name=images/[hash:8]-[name].[ext]' }, // 配置 处理 样式表中图片的 loader规则
          // 可以使用?给 url-loader传递参数，其中，有一个固定的参数，叫做 limit，表示图片的大小，需要给定一个 数值；
          // limit 给定的这个数值，是 图片的大小，单位是 Byte（字节）
          // 如果指定了 limit 参数，则只有图片的大小，小于给定的 值时候，才会转为base64格式的图片；否则，就不转换；
          {  test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 添加转换JS文件的loader，其中，必须把 node_modules 目录设置为 排除项，这样，在打包的时候，会忽略node_modules 目录下的所有JS文件；否则项目运行不起来！
        ]
      }
    }

--------------------

> [上一篇 Vue学习5-(webpack)][Vue_5-_webpack]  
> [下一篇 Vue学习7-MinUI组件与项目托管到码云上][Vue_7-MinUI]

[Vue_5-_webpack]: https://blog.csdn.net/m0_45234510/article/details/106127123
[Vue_7-MinUI]: https://blog.csdn.net/m0_45234510/article/details/106171009
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20230312/d1517a3aa8884b858984d8e1457adad8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20230312/cbc5382c322b436d972f1d184c361196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20230312/d326c00f12cd452abd34fe588b2cc2ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20230312/52f96113181b4b64a94f1e14e691275d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20230312/ba016ed6cae0400ba82acb8296ad0ba1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20230312/29d9874ea96e4cd08e8117b9c6c75b39.png
[https_webpack.js.org_configuration_plugins_plugins]: https://webpack.js.org/configuration/plugins/#plugins
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20230312/eb1b211e97e640f4a6a2850efe9b2e8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20230312/15f2f6c16c094c7aae7e877799bf84ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20230312/cb14ec5c497742e582006c43a80665de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20230312/17fe22625c4d4c088e3ca33200916dba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20230312/45b9c147470045b9814e8306c2c7522b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20230312/b8212a4474a44203bdc5ac54e6c0136d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20230312/8b0973b91e6141b59c452d293390ef21.png