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/…