webpack3從零開始配置過程

webpack配置過程

基本的入口出口配置

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: {
    main: './src/main.js',  // 入口
  },
  output: {
    path: path.resolve(__dirname, 'dist'),    // 輸出目錄 這裏使用path.resolve方法是爲了消除跨平臺的差別由於mac和window的絕對路徑表示方式不同
    filename: 'bundle.js',
  }
}

添加基本的加載器

1. 導入extract-text-webpack-plugin

   const ExtractTextPlugin = require('extract-text-webpack-plugin');
   const lessExtract = new ExtractTextPlugin('less.css');

2. module.exports中加入module對象

   module: {
       rules: [
         {
           test: /.(js)$/, // 使用loader的目標文件。這裏是.js
           loader: 'babel-loader',
           exclude: [
             path.join(__dirname, '../node_modules'),  // 因爲node_modules都是編譯過的文件，這裏咱們不讓babel去處理其下面的js文件
           ],
         },
         {
           test: /\.(c)ss$/,
           use: [
             'style-loader', // style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標籤中
             'css-loader', // css-loader 會遍歷 CSS 文件，而後找到 url() 表達式而後處理他們
             'postcss-loader',
           ],
         },
         {
           test: /\.less$/,
           loader: lessExtract.extract({
             use: ['css-loader?minimize', 'less-loader'],
           }),
         },
       ],
     },
     plugins: [
       lessExtract,
     ],

   這個時候就能夠看出打包速度異常之慢，同時沒法加載antd樣式

   

   配置.babelrc
   再plugins中添加解決沒法加載antd樣式問題

   [
           "import",
           {
             "libraryName": "antd",
             "style": true
           }
       ]

使用HappyPack來優化js得打包(happyPack原理)

1. 導入happypack

   const HappyPack = require('happypack');
   const os = require('os');
   const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

2. plugins 中添加以下代碼

   new HappyPack({
         id: 'jsHappy',
         verbose: false, //關掉日誌
         threadPool: happyThreadPool,
         loaders: [{
           path: 'babel-loader',
           query: {
             cacheDirectory: './node_modules/.webpack_cache',
           },
         }],
       }),

3. 將module.rules 中js得規則改成

   {
           test: /\.js?$/,
           exclude: /node_modules/,
           loader: 'HappyPack/loader?id=jsHappy',
         },

   

   再次編譯發現編譯時間減小了6s 也就是一倍左右

添加webpack.dll.config.js

不少時候咱們並非都須要每次從新打包全部文件 咱們只是須要打包咱們的源代碼
此時咱們就須要這種方式去優化，配置過程很統一，參考如下連接

webpack.dll.config.js詳解

事實上這種優化方式只是對生產模式有很大優化，若是是開發模式不以下文中添加--wathch參數的方式

添加electron配置：

因爲是使用electron開發桌面應用，因此須要在moudle.export 對象內添加

target: 'electron-renderer',

添加這句話後 咱們的前端代碼中也能夠引用node和electron自帶的一些node_modules
同時直接在瀏覽器中打開入口文件的話，將會報錯啦

啓動

在package.json 中添加這樣一句話

"scripts": {
  "dev": "webpack --watch",
},

這個watch 參數表名了啓動webpack監聽，啓動後每次修改文件採用增量打包的方式自動從新編譯，速度很快

---

最後附上一篇吐槽webpack得連接😊：
https://zhuanlan.zhihu.com/p/...