从0到1搭建项目基座

站长

2022年09月17日 19:53 · 阅读数 31

本文是参考2020年了,再不会webpack敲得代码就不香了(近万字实战)一点一点手动敲代码实践的，不同的地方就是现在是webpack5+vue3。

一、初始化

1. 创建文件夹antdv，`cd antdv`，执行`npm init`初始化

从0到1搭建项目基座

2. 安装`webpack`、`webpack-cli`

npm i -D webpack webpack-cli

这里有个注意点是在项目内安装而不是全局安装webpack和webpack-cli，因为有时候不同项目需要不同版本的webpack。这里安装了最新版本的：从0到1搭建项目基座

3. 测试下`webpack`的打包

a) 在项目内（antdv文件夹下）新建src/main.js 从0到1搭建项目基座 b) 在package.json配置命令

"scripts": {
    "build": "webpack ./src/main.js"
  },

c) 运行成功，会出现一个dist文件夹，里边是打包后的main.js 从0到1搭建项目基座

二、开始配置

1. 新建/build/webpack.config.js

// webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development', // 开发模式
  entry: path.resolve(__dirname, '../src/main.js'), // 入口文件
  output: {
    filename: 'main.js', // 打包后的文件名称
    path: path.resolve(__dirname, '../dist') // 打包后输出的文件所在的目录
  }
}

其中dist文件夹中的main.js就是我们需要在浏览器中实际运行的文件。我们在html文件中引入打包好的js。但是为了每次改动浏览器都能拿到最新的js，我们往往会这样配置：

// webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development', // 开发模式
  entry: path.resolve(__dirname, '../src/main.js'), // 入口文件
  output: {
    filename: '[name].[hash:8].js', // 每次打包hash值会变，这样就不会被浏览器缓存命中，每次就能拿到最新的文件
    path: path.resolve(__dirname, '../dist') // 打包后输出的文件所在的目录
  }
}

2. 配置在html中自动引入打包好的js文件

a) 安装插件HtmlWebpackPlugin

npm i -D html-webpack-plugin

b) 新建/public/index.html，里面可以什么都不写 c) 配置插件


const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    })
  ]
}

d) 运行npm run build 然后就会发现打包好的js已经自动引入到index.html里去了从0到1搭建项目基座

3. 清理dist文件夹残留的上次打包的文件

a) 安装clean-webpack-plugin

npm i -D html-webpack-plugin

b) 效果从0到1搭建项目基座

4. 配置css loader、scss loader

a) 安装loader

npm i -D style-loader css-loader
cnpm i --save-dev node-sass // 这个如果用npm的话很慢，所以换了源

b) 配置loader

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 从右向左解析
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  // ...
}

5. 为浏览器添加前缀

a) 安装loader

npm i --save-dev postcss-loader autoprefixer

b) 配置loader

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 从右向左解析
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]

c) 执行效果【问题1】如果这么写?

rules:[{
    test:/\.scss$/,
    use:['style-loader','css-loader',{
        loader:'postcss-loader',
        options:{
            plugins:[require('autoprefixer')]
        }
    },'sass-loader'] // 从右向左解析原则
}]

报错如下?

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }
    at Object.loader

【解决】则参考官网新写法传送门，以上写法是webpack 4.x版本的写法。现在项目安装的是webpack 5.x。

【问题2】这里如果执行npm run build的时候报错?

Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'

【解决】重新安装一下sass-loader和node-sass就好了。

6. 外链css

上面的第五步，打包后的css是以style标签的形式插入到了html中。如果想要css以外链的形式插入的话，就要这样（会将所有的css样式合并为一个css文件）：

安装npm i --save-dev mini-css-extract-plugin
配置

// webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'autoprefixer'
                ],
              ],
            },
          }
        }] // 从右向左解析
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'autoprefixer',
                  {
                    // Options
                  },
                ],
              ],
            },
          }
        }, 'sass-loader']
      }
    ]
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].css'
    })
  ]
}

7.打包图片、字体、媒体、等文件

安装插件

npm i --save-dev file-loader url-loader

配置

rules: [
    // ...
    {
        test: /\.(jpe?g|png|gif)$/i, // 图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // 媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options:{
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      }
]

8.用babel转义js文件

a) babel-loader是将es6/7/8的代码转换成es5的。

安装插件

npm i --save-dev babel-loader @babel/preset-env @babel/core

配置

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  },
  exclude: /node_modules/
}

b) 上面的babel-loader只会转换es6/7/8的代码成es5，而并不会转换新api，比如promise/set/map等等，下面安装babel-polyfill完成这项工作

安装插件

npm i @babel/polyfill

配置

entry: ['@babel/polyfill', path.resolve(__dirname, '../src/main.js')], // 入口文件

三、搭建vue3开发环境

vue-loader 用于解析.vue文件 vue-template-compiler 用于编译模板

0. `npm i vue@next`

1. `npm i --save-dev vue-loader vue-template-compiler vue-style-loader`

2. 简单新建app.vue/main.js/index.html

// src/app.vue
<template>
  <div id="counter">
    Counter: {{ counter }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter: 0
    }
  }
}
</script>
<style lang="scss" scoped>
div {
  color: #000;
}
</style>

// src/main.js
import { createApp } from 'vue'
import App from './app.vue'

createApp(App).mount('#app')

// public/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>0-1 webpack</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

3. 配置

+ const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    // ...
+     resolve: {
+       alias: {
+         'vue$': 'vue/dist/vue.runtime.esm.js',
+         '@': path.resolve(__dirname, '../src')
+       },
+       extensions: ['*', '.js', '.json', '.vue']
+   },
  module: {
    rules: [
    // ...
+     {
+         test: /\.vue$/,
+         use: ['vue-loader']
+       }
    ]
  },
  plugins: [
      // ...
+     new VueLoaderPlugin()
  ]
}

4. 配置打包命令

// package.json

 "scripts": {
+     "serve": "webpack-dev-server --config build/webpack.config.js --open"
  },

4.1 此时运行`npm run serve`，报错如下：

从0到1搭建项目基座

网上说好像是webpack的版本和webpack-dev-server版本不一致的问题。找到了这个问题传送门，然后试了下，把命令的webpack-dev-server换成webpack serve，再运行npm run serve就没报那个错了。

// package.json
"scripts": {
- "serve": "webpack-dev-server --config build/webpack.config.js --open",
+ "serve": "webpack serve --config build/webpack.config.js"
  },

4.2 解决了上述问题之后再继续运行`npm run serve`，结果又报错：

从0到1搭建项目基座

说是vue-loader跟vue-template-compiler的版本不一致

去找了下vue3的配置，vue-template-compiler换成了@vue/compiler-sfc。

// package.json
- "vue-template-compiler": "^2.6.12",
+ "@vue/compiler-sfc": "^3.0.2",

4.3 然后又有这个问题

从0到1搭建项目基座

我就去github照着and-design-vue的库的webpack配置对比了一下，升级了vue-loader的版本：

// webpack.config.js
alias: {
-  vue$: 'vue/dist/vue.runtime.esm.js',
+  vue$: 'vue/dist/vue.esm-bundler.js',
  '@': path.resolve(__dirname, '../src')
},

// package.json
- "vue-loader": "^15.9.5",
+ "vue-loader": "^16.0.0-rc.2",

4.4 因为升级了vue-loader的版本，又会出现这个问题：

从0到1搭建项目基座

包改变了，所以去找了一下vue-loader的包，长这个样子

从0到1搭建项目基座

plugin.js里边长这个样子

从0到1搭建项目基座

所以原来的配置也需要修改一下

// webpack.config.js
- const VueLoaderPlugin = require('vue-loader/dist/plugin')
+ const VueLoaderPlugin = require('vue-loader/dist/plugin').default

4.5 最后，终于解决了

运行npm run serve，不再报错！！！至此，vue3的配置完成。

5. 区分生产环境与开发环境

// webpack.config.js

const path = require('path')
- const Webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/dist/plugin').default
+ const devMode = process.argv.indexOf('--mode=production') === -1

module.exports = {
-  mode: 'development', // 开发模式
  entry: ['@babel/polyfill', path.resolve(__dirname, '../src/main.js')], // 入口文件
  output: {
    filename: '[name].[hash:8].js', // 打包后的文件名称
    path: path.resolve(__dirname, '../dist'), // 打包后输出的文件所在的目录
+     chunkFilename: 'js/[name]:[hash:8].js'
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
      '@': path.resolve(__dirname, '../src')
    },
    extensions: ['*', '.js', '.json', '.vue']
  },
-  devServer: {
-    port: 3000,
-    hot: true,
-    contentBase: '../dist'
-  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
+         {
+           loader: devMode ? 'vue-style-loader': MiniCssExtractPlugin.loader,
+           options: {
+             publicPath: '../dist/css/',
+             hmr: devMode
+           }
+         },
-     MiniCssExtractPlugin.loader,
        'css-loader', 
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'autoprefixer'
                ]
              ]
            }
          }
        }] // 从右向左解析
      },
      {
        test: /\.scss$/,
        use: [
+         {
+           loader: devMode ? 'vue-style-loader': MiniCssExtractPlugin.loader,
+           options: {
+             publicPath: '../dist/css/',
+             hmr: devMode
+           }
+         },
-     MiniCssExtractPlugin.loader,
          'css-loader',
          {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'autoprefixer'
                ]
              ]
            }
          }
        }, 'sass-loader']
      },
      {
        test: /\.(jpe?g|png|gif)$/i, // 图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // 媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options:{
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: [
-        'vue-loader'
+         {
+          loader: 'vue-loader',
+          options: {
+             compilerOptions: {
+               preserveWhitespace: false
+             }
+           }
+         }
    ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
-      chunkFilename: '[id].[hash].css'
+      filename: devMode ? '[name].css' : '[name].[hash].css',
+      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    }),
    new VueLoaderPlugin(),
-     new Webpack.HotModuleReplacementPlugin()
  ]
}

// 开发环境配置文件
// 开发环境主要实现的是热更新,不要压缩代码，完整的sourceMap

const Webpack = require('webpack')
const webpackConfig = require('./webpack.config.js')
const { merge } = require('webpack-merge')

module.exports = merge(webpackConfig, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    port: 3000,
    hot: true,
    contentBase: '../dist'
  },
  plugins: [
    new Webpack.HotModuleReplacementPlugin()
  ]
})

最后，生产环境配置如下：

// webpack.prod.js
// 生产环境配置文件
// 生产环境主要实现的是压缩代码、提取css文件、合理的sourceMap、分割代码

const path = require('path')
const webpackConfig = require('./webpack.config.js')
const { merge } = require('webpack-merge')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin  = require('terser-webpack-plugin')

module.exports = merge(webpackConfig, {
  mode: 'production',
  devtool: 'nosources-source-map',
  plugins: [
    new CopyWebpackPlugin({
      patterns:
      [{
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../dist')
      }]
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          warnings: false,
          compress: {
            drop_console: true,// 注释console
            drop_debugger: true, // 注释debugger
            pure_funcs: ["console.log"]
          }
        }
      }),
      new OptimizeCssAssetsPlugin({})
    ],
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
})

【注意】如果遇到以下问题（1）遇到WebpackMerge is not a function 从0到1搭建项目基座应该是webpack-merge这个插件版本差异的原因，网上搜了以下，应该是插件的导出不一样了，所以?：

// webpack.dev.js && webpack.prod.js
- const WebpackMerge = require('webpack-merge')
- module.exports = WebpackMerge(webpackConfig, {

+ const { merge } = require('webpack-merge')
+ module.exports = merge(webpackConfig, {

（2）devtool should match pattern 从0到1搭建项目基座大概是webpack5的devtool配置选项的值是有固定的几个选项的。然后去官网看了一下，是有我写的选项的，但是却报了上面这个错，然后我就根据错误的提示去修改了一下?：

// webpack.dev.js
- devtool: 'cheap-module-eval-source-map',
+ devtool: 'eval-cheap-module-source-map',

（3）如果装了uglifyjs插件来压缩js的，请把它卸载掉。现在城里人都用terser plugin了orz

装了uglify的时候，执行npm run build打包一直报错：

从0到1搭建项目基座然后在网上找都说是不识别es6的语法等等，我看我也配置好了呀：

// webpack.config.js
rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      },
      // ...
]

甚至还加了个.babelrc文件。。。还是一样报错。仔细对比官方中文文档，配置也一毛一样orz 后来搜索的时候看到有个搜索选项写着uglify废弃字样的，我就想该不会这个插件真的是已经废弃了吧，所以才一直没起作用报错，然后我就转去英文文档，看了一下，果然已经被terser取代了/(ㄒoㄒ)/~~

（4）`WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.Assets: main.a33e7a8f.js (440 KiB)`

这个是说入口文件大小超过设置了，那么这里就改一下设置（或者改成performance: false）：

// webpack.prod.js
module.exports = merge(webpackConfig, {
  // ...
 +   performance: {
 +     maxEntrypointSize: 500000,
 +     maxAssetSize: 500000
 +   }
}

优化webpack配置

优化打包速度

缩小文件的搜索范围(配置include exclude alias noParse extensions)

其实这个前面就有配置过，只是没有说明

alias - 文件路径别名，一般就是简化文件路径
include - 给loader指明道路，该去哪里（目录）解析文件，而不必理会别的地方的文件
exclude - 告诉loader，匹配到这个的路径下的文件不必解析
noParse - 不必解析匹配上的目录里的文件
extensions - 文件扩展名，根据扩展名查找文件，频率高的优先写在前面

// webpack.config.js
resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
      '@': path.resolve(__dirname, '../src'),
+      'assets': path.resolve('src/assets'),
+      'components': path.resolve('src/components')
    },
+    extensions: ['*', '.js', '.json', '.vue']
  },
// ...
rules: [
      {
        test: /\.js$/,
        use: [{
          loader: 'happypack/loader?id=happyBabel',
        }],
+        include: [path.resolve(__dirname, '../src')],
+        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              preserveWhitespace: false
            }
          }
        }],
+        include: [path.resolve(__dirname, '../src')],
+        exclude: /node_modules/
      },
      // ...
]

这里要注意的点就是，文件的路径！因为我的webpack配置文件都是在根目录下build文件夹里(`/build/webpack.*.js`)，所以这里`path.resolve(__dirname, '../src')`是`../`

如果路径不对，比如说我上边要是写成src，就报了如下错误：

从0到1搭建项目基座

使用HappyPack开启多进程Loader转换

安装
```
npm i --save-dev happypack
```

配置

// webpack.config.js
+ const HappyPack = require('happypack')
+ const os = require('os')
+ const webpack = require('webpack')
+ const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// ...
rules: [
      {
        test: /\.js$/,
        use: [{
          loader: 'happypack/loader?id=happyBabel',
-           options: {
-             presets: ['@babel/preset-env']
-           }
        }],
        include: [path.resolve(__dirname, '../src')],
        exclude: /node_modules/
      },
      // ...
]
// ...
plugins: [
// ...
+    new HappyPack({
+      id: 'happyBabel', // 与loader对应的id标识
+      loaders: [ // 用法和loader的配置一样，注意这里是loaders
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env']
+            ],
+            cacheDirectory: true
+          }
+        }
+      ],
+      threadPool: happyThreadPool // 共享进程池
+    }),
]

使用webpack-parallel-uglify-plugin 增强代码压缩

加入进去，配置之后运行npm run build报错了，好像是因为它是依赖uglifyJS的，而之前上面提到过，uglifyJS在webpack5已经被废弃了，然后这个暂时不知道如何改造。。。

抽离第三方模块

项目中依赖的库，比如说vue、elementui、axios等，因为它们很少会变更，所以我们不希望每一次构建都要继承这些依赖，这样会拖慢构建速度。所以如果把这些第三方库抽取出来，每次构建只打包我们项目中的文件，就可以提高构建速度。当升级第三方库的时候才重新打包这些库。

安装使用webpack内置的插件：DllPlugin、DllReferencePlugin

新建webpack.vendor.config.js

// webpack.vendor.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
  // 要打包的第三方模块的数组
  entry: {
    vendor: ['vue']
  },
  output: {
    path: path.resolve(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_[fullhash]' // 这里需要和webpack.DllPlugin中的`name: '[name]_[fullhash]'`保持一致
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../[name]-manifest.json'),
      context: __dirname,
      name: '[name]_[fullhash]'
    })
  ]
}

更改webpack.config.js

+ const CopyWebpackPlugin = require('copy-webpack-plugin')
// ...
plugins: [
// ...
+ new webpack.DllReferencePlugin({
+      context: __dirname,
+      manifest: require('../vendor-manifest.json')
+    }),
+    new CopyWebpackPlugin({ // 拷贝生成的文件到dist目录 这样每次不必手动去cv
+      patterns:
+      [{
+        from: 'static',
+        to: 'static'
+      }]
+    })
]

package.json添加命令

"dll": "webpack --config build/webpack.vendor.config.js"

执行npm run dll就会生成文件

在html文件中手动引入打包好的依赖文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>0-1 webpack</title>
+    <script src="../static/js/vendor.dll.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

注意

这里要注意的点依然是文件路径🤦‍。比如这里的static文件夹，是要生成要根目录下的，而我的配置文件是在build文件夹里的，所以这里要注意下它们之间的相对路径。

总结

引用2020年了,再不会webpack敲得代码就不香了(近万字实战)：

这样如果我们没有更新第三方依赖包，就不必npm run dll。直接执行npm run dev npm run build的时候会发现我们的打包速度明显有所提升。因为我们已经通过dllPlugin将第三方依赖包抽离出来了。

从0到1搭建项目基座

一、初始化

1. 创建文件夹antdv，cd antdv，执行npm init初始化

2. 安装webpack、webpack-cli

3. 测试下webpack的打包

二、开始配置

1. 新建/build/webpack.config.js

2. 配置在html中自动引入打包好的js文件

3. 清理dist文件夹残留的上次打包的文件

4. 配置css loader、scss loader

5. 为浏览器添加前缀

6. 外链css

7.打包 图片、字体、媒体、等文件

8.用babel转义js文件

三、搭建vue3开发环境

0. npm i vue@next

1. npm i --save-dev vue-loader vue-template-compiler vue-style-loader

2. 简单新建app.vue/main.js/index.html

3. 配置

4. 配置打包命令

4.1 此时运行npm run serve，报错如下：

4.2 解决了上述问题之后再继续运行npm run serve，结果又报错：

4.3 然后又有这个问题

4.4 因为升级了vue-loader的版本，又会出现这个问题：

4.5 最后，终于解决了

5. 区分生产环境与开发环境

优化webpack配置

优化打包速度

缩小文件的搜索范围(配置include exclude alias noParse extensions)

使用HappyPack开启多进程Loader转换

使用webpack-parallel-uglify-plugin 增强代码压缩

抽离第三方模块

1. 创建文件夹antdv，`cd antdv`，执行`npm init`初始化

2. 安装`webpack`、`webpack-cli`

3. 测试下`webpack`的打包

7.打包图片、字体、媒体、等文件

0. `npm i vue@next`

1. `npm i --save-dev vue-loader vue-template-compiler vue-style-loader`

4.1 此时运行`npm run serve`，报错如下：

4.2 解决了上述问题之后再继续运行`npm run serve`，结果又报错：