webpack4 SPA構建案例

一直以來，對於webpack<=3來進行構建，還是比較得心應手的，然而隨時技術的更新，webpack4出來了，緊隨步伐，那就開始寫一個webpack4的構建腳手架吧，
於是...開始了基於vue的webpack4單頁構建腳手架的開發了。

1. webpack4的幾大組成部分

Entry：入口，Webpack的入口文件，可以爲String,Array,Object。
Output：出口，輸出的最終結果，裏面可以配置path、publicPath、filename、chunkFilenamet等。
Module：模塊，在 Webpack 裏一切皆模塊，配置處理各種文件所需要的loader。
optimization：主要是做webpack3當中commonchunk所做的事件，可實現代碼分離、提取公共模塊等，配置更好靈活也是最爲複雜的一部分。
Plugin：包括內置插件及第三方插件，直接對整個構建過程起作用。

2. spa的入口文件

entry: {
  main: [
    path.resolve(__dirname, '../src/main.js'),
  ],
}

3. 配置出口

  output: {
    path: path.resolve("./dist"),
    filename: '[name].[hash:10].js', 
    chunkFilename: '[name].chunk.js'
  }

4. 配置開發服務器

開發模式入口文件加入webpack熱更新

  entry: {
    main: [
      'webpack-dev-server/client?/',
      'webpack/hot/only-dev-server'
      ]
  },
  devtool: 'cheap-module-inline-source-map',
  devServer: {
    open: false,
    clientLogLevel: 'warning',
    publicPath: '/',
    contentBase: path.resolve(__dirname,'../src'),
    port: config.port,
    host: 'localhost',
    inline: true,
    historyApiFallback: {
      index: '/'
    },
    hot: true,
    compress: true,
    proxy: config.proxy
  }

5. 預先構建動態鏈接庫

  module.exports = {
  entry: {
    vendor: config.vendor.modules
  },
  output: {
    filename: '[name]_dll_[chunkhash:10].js',
    path: path.resolve(config.vendor.path),
    library: '[name]_dll_[chunkhash:10]'
  },
  mode: process.env.NODE_ENV,
  performance: {
    hints: false
  },
  plugins: [
    new webpack.DllPlugin({
      context: process.cwd(),
      path: path.join(config.vendor.path, '[name].json'),
      name: '[name]_dll_[chunkhash:10]'
    }),
    new webpack.HashedModuleIdsPlugin()
  ]
};

6. 配置module

module: {
rules: [
  {
    test: /\.css$/,
    exclude: '/node_modules/',
    use: [
      {loader: 'vue-style-loader'}, 
      {
        loader: `css-loader`,
        options: {
          sourceMap: true,
          minimize: true  
        }
      },
      {
        loader: 'postcss-loader',
        options: {         
          plugins: () => [
              require('precss')(),
              require('postcss-cssnext')(), 
          ]
        }
      }
    ]
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    exclude: /node_modules/,
    options:{
      loaders: {
        css: ['vue-style-loader','css-loader','postcss-loader']
      }
    }
  },
  {
    test: /\.(?:woff2?|eot|ttf|svg)$/,
    loader: 'file-loader',
    options: {
      name: 'icons/[name].[ext]'
    }
  },
  {
    test: /\.(?:png|jpe?g|gif)$/,
    loaders: 
       [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: '[name].[ext]'
            }
          }
        ]
  },
]

}

7. 配置plugins

• 生產環境下清空打包目錄

new CleanWebpackPlugin([config.outputBase], {
  root: path.resolve('./'),
  verbose: true
}),

• 產出html
  new HtmlWebpackPlugin({

   inject: true,
   title: 'test',
   template: '../src/index.html',
   filename: 'index.html',
   chunksSortMode: 'dependency',
   minify: {
     collapseWhitespace: true,
     removeComments: true,
     minifyJS: true
   }

  })，

• 壓縮css

  new OptimizeCssAssetsPlugin(),

• 動態鏈接庫做關聯

  new webpack.DllReferencePlugin({

   context: process.cwd(),
   manifest: require(vendorManifestPath)

  })

8. 啓用optimization

• 開發環境下
  optimization:{
  namedModules: true,
  },
• 生產環境下

  optimization:{
  hashedModuleIds:true,
  },

8. 構建速度大大提升

• 第一次

• 再一次

9. 項目源碼