webpack发布策略

Posted 2021-03-16 Hello World

在开发阶段, 一般会有两套方案:

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

为了满足我们的发布策略, 需要新建一个配置文件, 命名为 webpack.publish.config.js 将 webpack.config.js 的配置拷贝过去, 剔除一些开发配置即可 ;

devServer {
  hot: true,
  open: true,
  port: 8080
}

将 plugins 节点下的热更新插件删除 ;

new webpack.HotModuleReplacementPlugin()

修改 url-loader , 将图片放入统一的 images 文件夹下 ;

{ test: /.(png|jpeg)$/, use: 'url-loader?limit=1024&name=images/[name].[ext]' }

或者使用 img- 前缀加上 7位的hash名称 ;

{ test: /.(png|jpeg)$/, use: 'url-loader?limit=1024&name=images/img-[hash:7].[ext]' }

每次打包自动生成 dist 目录 删除老的 dist 目录

npm install clean-webpack-plugin -D

const cleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
  // 需要删除的目录
  new cleanWebpackPlugin(['dist'])
]

抽离第三方包

思路: bundle.js 只存放自己的代码 第三方包的代码全部抽离到一个另外的 js 中

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: {
    app: path.join(__dirname, 'src/main.js'),
    // 要抽离的包
    vendors: ['jquery']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // 如果前面加了目录就代表是打包到某个文件夹 '/js/vendors.js'
    filename: '/js/bundle.js'
  },
  plugins: [
    // 实例化构造函数
    new webpack.optimize.CommonsChunkPlugin({
      // 指定要抽离的入口名称, 此处和 entry 处对应
      name: 'vendors',
      // 将来在发布的时候, jquery 就放到了 vendors.js 
      // 如果前面加了目录就代表是打包到某个文件夹 '/js/vendors.js'
      filename: 'vendors.js'
    })
  ]
};

压缩 JS 代码

const webpack = require('webpack');
plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: { // 配置压缩选项
      warnings: false,  // 移除警告
    }
  }),
  new webpack.optimize.DedupPlugin({ // 定义生产环境, 进一步压缩代码
    'process.env.NODE_ENV': '"production"'
  })
]

压缩 html 代码

const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
plugins: [
  template: path.join(__dirname, 'src/index.html'),
  filename: 'index.html',
  minify: {
    collapseWhitespace: true, // 合并多余空格
    removeComments: true, // 移除注释
    removeAttributeQuotes: true, // 移除属性上的双引号
  }
]

抽离文件夹

npm install extract-text-webpack-plugin -D

cont ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  module: {
    { 
      test: /.css$/, 
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader',
        // 打包到指定文件夹后可能会找不到背景图片
        // 指定抽取的时候, 自动为我们的路径加上 ../ 前缀
        publicPath: '../' 
      })
    }
  },
  plugins: [
    // 抽取 css 文件并且命名为 style.css
    // 如果前面加了目录就代表是打包到某个文件夹 '/css/style.css'
    new ExtractTextPlugin('style.css')
  ]
}

参考链接: https://webpack.docschina.org/plugins/extract-text-webpack-plugin/#-extract

压缩 CSS 文件

npm install optimize-css-assets-webpack-plugin -D

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
plugins: [
  // 压缩 CSS 文件
  new OptimizeCssAssetsPlugin()
]