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