从0到1搭建项目基座

头像
ever
    阅读 19 分钟
    1

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

    一、初始化

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

    第一步，npm init

    2. 安装webpack、webpack-cli

    npm i -D webpack webpack-cli

    这里有个注意点是在项目内安装而不是全局安装webpack和webpack-cli，因为有时候不同项目需要不同版本的webpack。
    这里安装了最新版本的：
    安装codewebpack/code、codewebpack-cli/code

    3. 测试下webpack的打包

    a) 在项目内（antdv文件夹下）新建src/main.js
    在项目内（antdv文件夹下）新建src/main.js
    b) 在package.json配置命令

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

    c) 运行成功，会出现一个dist文件夹，里边是打包后的main.js
    运行成功，会出现一个dist文件夹

    二、开始配置

    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里去了
    打包好的js已经自动引入到index.html里去了

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

    a) 安装clean-webpack-plugin

    npm i -D html-webpack-plugin

    b) 效果
    清理dist文件夹残留的上次打包的文件

    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，报错如下：

    网上说好像是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，结果又报错：

    说是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 然后又有这个问题

    无法编译解析vue模板

    我就去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的版本，又会出现这个问题：

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

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

    vue-loader的包

    plugin.js里边长这个样子

    plugin.js

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

    // 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
    WebpackMerge is not a function
    应该是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

    大概是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打包一直报错：

    装了uglify的时候，执行npm run build打包一直报错
    然后在网上找都说是不识别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，就报了如下错误：

    使用HappyPack开启多进程Loader转换

    1. 安装

      npm i --save-dev happypack

    2. 配置

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

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

    2. 新建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]'
    })
  ]
}

    3. 更改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'
+      }]
+    })
]

    4. package.json添加命令

      "dll": "webpack --config build/webpack.vendor.config.js"
    5. 执行npm run dll
      就会生成文件

      执行codenpm run dll/code后生成文件

    6. 在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>

    7. 注意

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

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

    这样如果我们没有更新第三方依赖包，就不必npm run dll。直接执行npm run dev npm run build的时候会发现我们的打包速度明显有所提升。因为我们已经通过dllPlugin将第三方依赖包抽离出来了。
    vue.jswebpack
    ever
    318 声望6 粉丝
    « 上一篇
    移动端类table组件封装
    下一篇 »
    升级webpack5，热更新失效问题

    引用和评论

    推荐阅读
    头像
    h5通过ping++集成几种支付

    ever阅读 1.4k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    一个简易的DIY场景H5框架

    Undefined_0赞 5阅读 5k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    webpack的入门教程

    小蚊酱赞 2阅读 2.1k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    前端微服务跨域配置解决办法，devServer为例

    smallStone赞 7阅读 6.5k评论 29

    0 条评论
    得票最新