Webpack——使用（三）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

生产环境

我们可以指定生产环境的配置,可能第三方库会使用到该变量.

因此最好添加如下配置到配置文件的入口.

process.env.NODE_ENV = 'production'

webpack 配置可以提炼出来,使用webpack-merge将webpack的配置文件进行合并.

我们可以建一个webpack.common.js文件,然后创建一个webpack.prod.js,webpack.dev.js,那么可以将prod,dev引入common共同引用参数.

common文件

 const path = require('path');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js'
   },
   plugins: [
     new CleanWebpackPlugin(['dist']),
     new HtmlWebpackPlugin({
       title: 'Production'
     })
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist')
   }
 };

生产环境:

 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   plugins: [
     new UglifyJSPlugin()
   ]
 });

开发环境:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'inline-source-map',
   devServer: {
     contentBase: './dist'
   }
 });

代码管理

默认的情况下,webpack会把引用的文件都会build到单独的文件当中.我们可能会把一些第三方的模块放到一个单独文件里.

需要对配置文件做如下改动:

//plugins数组当中添加一下参数
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common' // Specify the common bundle's name.
     })

这样配置后,例如两个js文件中共同的import XX from './underscore.js' 那么underscore被多个包导入后,不会被每个js文件引入,而放入到配置文件当中所配置的common.js文件

缓存策略

我们可以根据http协议告知浏览器是否进行缓存,例如:ETag,If-modified-since,Cache-Control等

webpack也提供了便利的hash方法进行资源的访问.

hash:每次build相关的hash

chunk hash : 在文件名中包含一个 chunk 相关(chunk-specific)的哈希。

配置当中output添加chunhash

    output: {
     filename: 'bundle.js',
     filename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist')
    }

有时候我们可能不需要每次编译生成相同的文件却生成了不同的hash.

还有个问题webpack默认的hash是根据module.id以及内容生成,而module.id根据解析文件的顺序生成,一个重要的问题是每次改动引入的文件,就可能会造成其它文件hahs不一致.

这时候就需要HashedModuleIdsPlugin插件,指定使用Path以及内容作为hash的内容.

只需要配置文件当中在plugins增加如下配置:

plugins:[
    ...,
    new webpack.HashedModuleIdsPlugin(),
    ...
]