Tip：如果你在开发模式（mode: 'development'）下打包，你会发现 main.js 中会有如下这段代码：
/***/ "jquery": /*!*************************!*\ !*** external "jQuery" ***! \*************************/ /*! no static exports found */ /***/ (function(module, exports) { eval("module.exports = jQuery;\n\n//# sourceURL=webpack:///external_%22jQuery%22?"); /***/ })这里的 jQuery 来自我们手动通过 <script src=http://www.likecs.com/> 引入 jquery 所产生的全局变量。
动态链接（dll）所谓动态链接，就是把一些经常会共享的代码制作成 DLL 档，当可执行文件调用到 DLL 档内的函数时，Windows 操作系统才会把 DLL 档加载存储器内，DLL 档本身的结构就是可执行档，当程序有需求时函数才进行链接。透过动态链接方式，存储器浪费的情形将可大幅降低。
对于 webpack 就是事先将常用又构建时间长的代码提前打包好，取名为 dll，后面打包时则直接使用 dll，用来提高打包速度
vue-cli 删除了 dll在 vue-cli 提交记录中发现：remove DLL option。
原因是：dll 选项将被删除。 Webpack 4 应该提供足够好的性能，并且在 Vue CLI 中维护 DLL 模式的成本不再合理。
Tip: 详情请看issue
核心代码附上项目最终核心文件，方便学习和解惑。
webapck.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const WorkboxPlugin = require('workbox-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); process.env.NODE_ENV = 'development' const postcssLoader = { loader: 'postcss-loader', options: { // postcss 只是个平台，具体功能需要使用插件 // Set PostCSS options and plugins postcssOptions: { plugins: [ // 配置插件 postcss-preset-env [ "postcss-preset-env", { // browsers: 'chrome > 10', // stage: }, ], ] } } } module.exports = { entry: './src/index.js', entry: ['./src/index.js', './src/index.html'], output: { filename: 'main.js', // filename: 'main.[contenthash:10].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/i, // 将 style-loader 改为 MiniCssExtractPlugin.loader use: [MiniCssExtractPlugin.loader, "css-loader", postcssLoader], }, { test: /\.less$/i, loader: [ // 将 style-loader 改为 MiniCssExtractPlugin.loader MiniCssExtractPlugin.loader, "css-loader", postcssLoader, "less-loader", ], }, { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { // 指定文件的最大大小（以字节为单位） limit: 1024 * 6, }, }, ], }, // + { test: /\.html$/i, loader: 'html-loader', }, { test: /\.js$/, exclude: /node_modules/, use: [ // 'thread-loader', { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', // + { // 配置处理polyfill的方式 useBuiltIns: "usage", // 版本与我们下载的版本保持一致 corejs: { version: "3.11" }, "targets": "> 0.25%, not dead" } ] ], // 开启缓存 cacheDirectory: true } }] } ] }, plugins: [ // new MiniCssExtractPlugin(), new MiniCssExtractPlugin({ // filename: "[name].[contenthash:10].css", }), new OptimizeCssAssetsPlugin(), new HtmlWebpackPlugin({ template: 'src/index.html' }), // new ESLintPlugin({ // // 将启用ESLint自动修复功能。此选项将更改源文件 // fix: true // }), new WorkboxPlugin.GenerateSW({ // 这些选项帮助快速启用 ServiceWorkers // 不允许遗留任何“旧的” ServiceWorkers clientsClaim: true, skipWaiting: true, }), ], mode: 'development', // mode: 'production', devServer: { // open: true, contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, }, devServer: { // 开启热模块替换 hot: true }, // devtool: 'eval-source-map', optimization: { splitChunks: { chunks: 'all', }, }, externals: { // jQuery 是jquery暴露给window的变量名，这里可以将 jQuery 改为 $，但 jquery 却不行 jquery: 'jQuery' } }; package.json { "name": "webpack-example3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack-dev-server", "start": "http-server dist" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/preset-env": "^7.14.2", "babel-loader": "^8.2.2", "core-js": "3.11", "css-loader": "^5.2.4", "eslint": "^7.26.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-webpack-plugin": "^2.5.4", "express": "^4.17.1", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^4.5.2", "http-server": "^0.12.3", "less-loader": "^7.3.0", "mini-css-extract-plugin": "^1.6.0", "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss-loader": "^4.3.0", "postcss-preset-env": "^6.7.0", "thread-loader": "^3.0.4", "url-loader": "^4.1.1", "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2", "workbox-webpack-plugin": "^6.1.5" }, "dependencies": { "jquery": "^3.6.0", "lodash": "^4.17.21", "vue": "^2.6.14" }, "sideEffects": false }其他章节请看：