从0开始搭建vue+webpack脚手架（三）

在从0开始搭建vue+webpack脚手架（二）中已经基本完成了开发环境的配置。当开发完成后，我们需要将完成的项目进行打包，接下来对打包做一些优化：

运行 $ npm run build 可生成dist目录

可以看到 01.jpg被存放在 images目录下, 并且后面生成一串不固定的字符串， 这是由之前的 rules配置的  name: 'images/[name]-[hash:8].[ext]' 产生的,

同样 bundle后面的字符串也是由 filename: "scripts/bundle.[hash:8].js"生成的

六、对CSS进行分离打包

在之前的开发环境下，我们都尽可能将图片和CSS都添加到bundle.js中，但是在完成开发后打包项目，我们需要将CSS文件单独分离出来。

1. 安装分离插件 ExtractTextWebpackPlugin, 使用webpack4.x的必须加 @next， 它会下载到extract-text-webpack-plugin@4.0.0-beta.0 , 否则打包时会有如图报错：

 npm install --save-dev extract-text-webpack-plugin@next

当然，在最新的webpack版本中，也可以使用 mini-css-extract-plugin 功能和 extract-text-webpack-plugin相似

2. 修改之前配置中 css和style的rules

 省略代码...
 const ExtractTextPlugin = require('extract-text-webpack-plugin')

 const config = {
   # 省略代码...
   module: {
     rules: [
       {
         test: /\.vue$/,
         use: [
           ...
         ]
       },
       {
         test: /\.jsx?$/,
         loader: "babel-loader"
       },
        ## 原来的css和stylus分为isDev环境和非isDev环境下配置
       {
         test: /\.(jpg|jpeg|gif|png|svg)$/,
         use: [
           ...
         ]
       }
     ]
   },
   plugins: [
        ...
   ]
 }

 if (isDev) {
   config.mode = 'development'
34   config.module.rules.push(   // 开发环境的配置，不需要提取,与之前的相同
35     {
36       test: /\.css$/,
37       use: ['style-loader', 'css-loader']
38     },
39     {
40       test: /\.styl(us)?$/,
41       use: [
42         'style-loader',
43         'css-loader',
44         {
45           loader: "postcss-loader",
46           options: {
47             sourceMap: true
48           }
49         },
50         'stylus-loader',
51       ]
52     },
53   )
   config.devServer = {
    ...
   }
   config.plugins.push(
    ...
   )
 } else {
   config.output.filename = 'scripts/bundle.[chunkhash:8].js'   // 打包时使用chunkhash ,之前开发时使用hash或者使用文件名本身亦可
   config.module.rules.push(
     {
       test: /\.css$/,
65       use: ExtractTextPlugin.extract({
66         fallback: 'style-loader',
67         use: ['css-loader']
68       })
     },
     {
       test: /\.styl(us)?$/,
72       use: ExtractTextPlugin.extract({
73         fallback: 'style-loader',
74         use: [
75           'css-loader',
76           {
77             loader: "postcss-loader",
78             options: {
79               sourceMap: true
80             }
81           },
82           'stylus-loader',
83         ]
84       })
     },
   )
87   config.plugins.push(
88     new ExtractTextPlugin('style.[hash:8].css')
89   )
 }

 module.exports = config    

由以上修改的代码中看出：

　　（1）在开发环境中不用分离CSS代码, 打包时才使用 ExtractTextPlugin插件分离

　　（2）编译时使用ExtractTextPlugin的extract方法， 最后用style.[hash:8].css文件输出

　　（3）打包时使用chunkhash输出文件, 与hash的区别在于，hash是整个应用的文件一样，而chunkhash是每个文件都不一样

　　（4）运行打包结果如下 : 多出了style.[hash].css文件

 七、单独打包类库文件(vue框架及第三方包)

原因：此类库的代码稳定性较高，而项目的业务代码经常需要更新迭代，为了让浏览器能更长时间缓存静态的类库文件，防止类库代码随着业务代码的更新而更新。类库的代码如果能长时间缓存在浏览器中，在项目运行时就不用每次都重新加载，达到减少服务器流量和用户加载更快。

在 else部分添加以下代码：

 config.entry = {
     app: path.join(__dirname, 'src/index.js'),
     vendor: ['vue']
 }
 config.plugins.push(
     new ExtractTextPlugin('style.[hash:8].css'),
     // new webpack.optimize.CommonsChunkPlugin() 在webpack4中已废弃, 使用SplitChunksPlugin
     // new webpack.optimize.SplitChunksPlugin({
     //   name: 'vendor'
     // }),
  )
 config.optimization = {
     splitChunks: {
       name: 'vendor'
     },
     runtimeChunk: {
       name: 'runtime'
     }
  }

打包后如下：　　

　　如上新增三个选项属性

vendor: ['vue']  ------ 表示 将vue, vue-router, vuex等第三方包单独打包

optimization.splitChunks  ----- 表示对应vendor打包输出的文件

optimization.runtimeChunk  ------ 表示 将app.js中webpack部分的代码分离打包出来

总结： 

　　1. webpack在项目中使用需要分别配置两种环境，即开发环境和生产环境。在开发环境中使用webpack-dev-server和热更新模块HotModuleReplacementPlugin搭配，让数据在不刷新浏览器的情况下改变。在开发环境无需配置压缩代码, 而在生产环境可以使用UglifyJsPlugin对代码压缩。

　　2.  使用相关loader编译css,js和文件, 编译es6语法

　　3.  devServer选项是在开发环境使用，可以配置热更新，本地域名端口等

　　4. 使用 ExtractTextPlugin插件对打包文件中的css代码分离出来，注意webpack4 和 webpack3 不用的安装方式。在最新版本的4.x中已经可以使用mini-css-extract-plugin来代替。

　　5. 使用 CommonsChunkPlugin将第三方类库如vue 等静态代码单独打包可以让浏览器长缓存，在webpack4.x中已经废弃，使用

optimize.SplitChunksPlugin， optimize.RuntimeChunkPlugin或者 optimization.splitChunks, optimization.runtimeChunk替代。