npm i -D style-loader css-loader\r\n<\/code><\/pre>\n\u5982\u679c\u6211\u4eec\u4f7f\u7528less\u6765\u6784\u5efa\u6837\u5f0f\uff0c\u5219\u9700\u8981\u591a\u5b89\u88c5\u4e24\u4e2a<\/p>\n
npm i -D less less-loader\r\n<\/code><\/pre>\n\u914d\u7f6e\u6587\u4ef6\u5982\u4e0b<\/p>\n
\/\/ webpack.config.js\r\nmodule.exports = {\r\n \/\/ ...\u7701\u7565\u5176\u4ed6\u914d\u7f6e\r\n module:{\r\n rules:[\r\n {\r\n test:\/\\.css$\/,\r\n use:['style-loader','css-loader'] \/\/ \u4ece\u53f3\u5411\u5de6\u89e3\u6790\u539f\u5219\r\n },\r\n {\r\n test:\/\\.less$\/,\r\n use:['style-loader','css-loader','less-loader'] \/\/ \u4ece\u53f3\u5411\u5de6\u89e3\u6790\u539f\u5219\r\n }\r\n ]\r\n }\r\n} \r\n\r\n<\/code><\/pre>\n\u6d4f\u89c8\u5668\u6253\u5f00html\u5982\u4e0b<\/p>\n
1.4.1 \u4e3acss\u6dfb\u52a0\u6d4f\u89c8\u5668\u524d\u7f00<\/h1>\nnpm i -D postcss-loader autoprefixer \r\n<\/code><\/pre>\n\u914d\u7f6e\u5982\u4e0b<\/p>\n
\/\/ webpack.config.js\r\nmodule.exports = {\r\n module:{\r\n rules:[\r\n {\r\n test:\/\\.less$\/,\r\n use:['style-loader','css-loader','postcss-loader','less-loader'] \/\/ \u4ece\u53f3\u5411\u5de6\u89e3\u6790\u539f\u5219\r\n }\r\n ]\r\n }\r\n} \r\n\r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u5f15\u5165autoprefixer\u4f7f\u5176\u751f\u6548,\u8fd9\u91cc\u6709\u4e24\u79cd\u65b9\u5f0f<\/p>\n
1\uff0c\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2apostcss.config.js\u6587\u4ef6\uff0c\u914d\u7f6e\u5982\u4e0b\uff1a<\/p>\n
module.exports = {\r\n plugins: [require('autoprefixer')] \/\/ \u5f15\u7528\u8be5\u63d2\u4ef6\u5373\u53ef\u4e86\r\n}\r\n\r\n\r\n<\/code><\/pre>\n2\uff0c\u76f4\u63a5\u5728webpack.config.js\u91cc\u914d\u7f6e<\/p>\n
\/\/ webpack.config.js\r\nmodule.exports = {\r\n \/\/...\u7701\u7565\u5176\u4ed6\u914d\u7f6e\r\n module:{\r\n rules:[{\r\n test:\/\\.less$\/,\r\n use:['style-loader','css-loader',{\r\n loader:'postcss-loader',\r\n options:{\r\n plugins:[require('autoprefixer')]\r\n }\r\n },'less-loader'] \/\/ \u4ece\u53f3\u5411\u5de6\u89e3\u6790\u539f\u5219\r\n }]\r\n }\r\n}\r\n\r\n<\/code><\/pre>\n\u8fd9\u65f6\u5019\u6211\u4eec\u53d1\u73b0css\u901a\u8fc7style\u6807\u7b7e\u7684\u65b9\u5f0f\u6dfb\u52a0\u5230\u4e86html\u6587\u4ef6\u4e2d\uff0c\u4f46\u662f\u5982\u679c\u6837\u5f0f\u6587\u4ef6\u5f88\u591a\uff0c\u5168\u90e8\u6dfb\u52a0\u5230html\u4e2d\uff0c\u96be\u514d\u663e\u5f97\u6df7\u4e71\u3002\u8fd9\u65f6\u5019\u6211\u4eec\u60f3\u7528\u628acss\u62c6\u5206\u51fa\u6765\u7528\u5916\u94fe\u7684\u5f62\u5f0f\u5f15\u5165css\u6587\u4ef6\u600e\u4e48\u505a\u5462\uff1f\u8fd9\u65f6\u5019\u6211\u4eec\u5c31\u9700\u8981\u501f\u52a9\u63d2\u4ef6\u6765\u5e2e\u52a9\u6211\u4eec<\/p>\n
1.4.2 \u62c6\u5206css<\/h1>\nnpm i -D mini-css-extract-plugin\r\n<\/code><\/pre>\nwebpack 4.0\u4ee5\u524d\uff0c\u6211\u4eec\u901a\u8fc7extract-text-webpack-plugin\u63d2\u4ef6\uff0c\u628acss\u6837\u5f0f\u4ecejs\u6587\u4ef6\u4e2d\u63d0\u53d6\u5230\u5355\u72ec\u7684css\u6587\u4ef6\u4e2d\u3002webpack4.0\u4ee5\u540e\uff0c\u5b98\u65b9\u63a8\u8350\u4f7f\u7528mini-css-extract-plugin\u63d2\u4ef6\u6765\u6253\u5305css\u6587\u4ef6<\/p><\/blockquote>\n
\u914d\u7f6e\u6587\u4ef6\u5982\u4e0b<\/p>\n
const MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\r\nmodule.exports = {\r\n \/\/...\u7701\u7565\u5176\u4ed6\u914d\u7f6e\r\n module: {\r\n rules: [\r\n {\r\n test: \/\\.less$\/,\r\n use: [\r\n MiniCssExtractPlugin.loader,\r\n 'css-loader',\r\n 'less-loader'\r\n ],\r\n }\r\n ]\r\n },\r\n plugins: [\r\n new MiniCssExtractPlugin({\r\n filename: \"[name].[hash].css\",\r\n chunkFilename: \"[id].css\",\r\n })\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n1.4.3 \u62c6\u5206\u591a\u4e2acss<\/h1>\n\u8fd9\u91cc\u9700\u8981\u8bf4\u7684\u7ec6\u4e00\u70b9,\u4e0a\u9762\u6211\u4eec\u6240\u7528\u5230\u7684mini-css-extract-plugin\u4f1a\u5c06\u6240\u6709\u7684css\u6837\u5f0f\u5408\u5e76\u4e3a\u4e00\u4e2acss\u6587\u4ef6\u3002\u5982\u679c\u4f60\u60f3\u62c6\u5206\u4e3a\u4e00\u4e00\u5bf9\u5e94\u7684\u591a\u4e2acss\u6587\u4ef6,\u6211\u4eec\u9700\u8981\u4f7f\u7528\u5230extract-text-webpack-plugin\uff0c\u800c\u76ee\u524dmini-css-extract-plugin\u8fd8\u4e0d\u652f\u6301\u6b64\u529f\u80fd\u3002\u6211\u4eec\u9700\u8981\u5b89\u88c5@next\u7248\u672c\u7684extract-text-webpack-plugin<\/p><\/blockquote>\n
npm i -D extract-text-webpack-plugin@next\r\n<\/code><\/pre>\n\/\/ webpack.config.js\r\n\r\nconst path = require('path');\r\nconst ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')\r\nlet indexLess = new ExtractTextWebpackPlugin('index.less');\r\nlet indexCss = new ExtractTextWebpackPlugin('index.css');\r\nmodule.exports = {\r\n module:{\r\n rules:[\r\n {\r\n test:\/\\.css$\/,\r\n use: indexCss.extract({\r\n use: ['css-loader']\r\n })\r\n },\r\n {\r\n test:\/\\.less$\/,\r\n use: indexLess.extract({\r\n use: ['css-loader','less-loader']\r\n })\r\n }\r\n ]\r\n },\r\n plugins:[\r\n indexLess,\r\n indexCss\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n1.5 \u6253\u5305 \u56fe\u7247\u3001\u5b57\u4f53\u3001\u5a92\u4f53\u3001\u7b49\u6587\u4ef6<\/h1>\n
file-loader\u5c31\u662f\u5c06\u6587\u4ef6\u5728\u8fdb\u884c\u4e00\u4e9b\u5904\u7406\u540e\uff08\u4e3b\u8981\u662f\u5904\u7406\u6587\u4ef6\u540d\u548c\u8def\u5f84\u3001\u89e3\u6790\u6587\u4ef6url\uff09\uff0c\u5e76\u5c06\u6587\u4ef6\u79fb\u52a8\u5230\u8f93\u51fa\u7684\u76ee\u5f55\u4e2durl-loader \u4e00\u822c\u4e0efile-loader\u642d\u914d\u4f7f\u7528\uff0c\u529f\u80fd\u4e0e file-loader \u7c7b\u4f3c\uff0c\u5982\u679c\u6587\u4ef6\u5c0f\u4e8e\u9650\u5236\u7684\u5927\u5c0f\u3002\u5219\u4f1a\u8fd4\u56de base64 \u7f16\u7801\uff0c\u5426\u5219\u4f7f\u7528 file-loader \u5c06\u6587\u4ef6\u79fb\u52a8\u5230\u8f93\u51fa\u7684\u76ee\u5f55\u4e2d<\/p>\n
\/\/ webpack.config.js\r\nmodule.exports = {\r\n \/\/ \u7701\u7565\u5176\u5b83\u914d\u7f6e ...\r\n module: {\r\n rules: [\r\n \/\/ ...\r\n {\r\n test: \/\\.(jpe?g|png|gif)$\/i, \/\/\u56fe\u7247\u6587\u4ef6\r\n use: [\r\n {\r\n loader: 'url-loader',\r\n options: {\r\n limit: 10240,\r\n fallback: {\r\n loader: 'file-loader',\r\n options: {\r\n name: 'img\/[name].[hash:8].[ext]'\r\n }\r\n }\r\n }\r\n }\r\n ]\r\n },\r\n {\r\n test: \/\\.(mp4|webm|ogg|mp3|wav|flac|aac)(\\?.*)?$\/, \/\/\u5a92\u4f53\u6587\u4ef6\r\n use: [\r\n {\r\n loader: 'url-loader',\r\n options: {\r\n limit: 10240,\r\n fallback: {\r\n loader: 'file-loader',\r\n options: {\r\n name: 'media\/[name].[hash:8].[ext]'\r\n }\r\n }\r\n }\r\n }\r\n ]\r\n },\r\n {\r\n test: \/\\.(woff2?|eot|ttf|otf)(\\?.*)?$\/i, \/\/ \u5b57\u4f53\r\n use: [\r\n {\r\n loader: 'url-loader',\r\n options: {\r\n limit: 10240,\r\n fallback: {\r\n loader: 'file-loader',\r\n options: {\r\n name: 'fonts\/[name].[hash:8].[ext]'\r\n }\r\n }\r\n }\r\n }\r\n ]\r\n },\r\n ]\r\n }\r\n}\r\n\r\n<\/code><\/pre>\n1.6 \u7528babel\u8f6c\u4e49js\u6587\u4ef6<\/h1>\n
\u4e3a\u4e86\u4f7f\u6211\u4eec\u7684js\u4ee3\u7801\u517c\u5bb9\u66f4\u591a\u7684\u73af\u5883\u6211\u4eec\u9700\u8981\u5b89\u88c5\u4f9d\u8d56<\/p>\n
npm i -D babel-loader @babel\/preset-env @babel\/core\r\n<\/code><\/pre>\n\n- \u6ce8\u610f babel-loader\u4e0ebabel-core\u7684\u7248\u672c\u5bf9\u5e94\u5173\u7cfb<\/li>\n<\/ul>\n
\n- babel-loader 8.x \u5bf9\u5e94babel-core 7.x<\/li>\n
- babel-loader 7.x \u5bf9\u5e94babel-core 6.x
\n\u914d\u7f6e\u5982\u4e0b<\/li>\n<\/ol>\n\/\/ webpack.config.js\r\nmodule.exports = {\r\n \/\/ \u7701\u7565\u5176\u5b83\u914d\u7f6e ...\r\n module:{\r\n rules:[\r\n {\r\n test:\/\\.js$\/,\r\n use:{\r\n loader:'babel-loader',\r\n options:{\r\n presets:['@babel\/preset-env']\r\n }\r\n },\r\n exclude:\/node_modules\/\r\n },\r\n ]\r\n }\r\n}\r\n\r\n<\/code><\/pre>\n\u4e0a\u9762\u7684babel-loader\u53ea\u4f1a\u5c06 ES6\/7\/8\u8bed\u6cd5\u8f6c\u6362\u4e3aES5\u8bed\u6cd5\uff0c\u4f46\u662f\u5bf9\u65b0api\u5e76\u4e0d\u4f1a\u8f6c\u6362 \u4f8b\u5982(promise\u3001Generator\u3001Set\u3001Maps\u3001Proxy\u7b49)\u6b64\u65f6\u6211\u4eec\u9700\u8981\u501f\u52a9babel-polyfill\u6765\u5e2e\u52a9\u6211\u4eec\u8f6c\u6362<\/p>\n
npm i @babel\/polyfill\r\n<\/code><\/pre>\n\/\/ webpack.config.js\r\nconst path = require('path')\r\nmodule.exports = {\r\n entry: [\"@babel\/polyfill\",path.resolve(__dirname,'..\/src\/index.js')], \/\/ \u5165\u53e3\u6587\u4ef6\r\n}\r\n\r\n<\/code><\/pre>\n\n- \u624b\u52a8\u628a\u4e0a\u9762\u7684demo\u6572\u4e00\u904d\u5bf9\u9605\u8bfb\u4e0b\u9762\u7684\u6587\u7ae0\u66f4\u6709\u76ca\uff0c\u5efa\u8bae\u5165\u95e8\u7684\u540c\u5b66\u6572\u4e09\u904d\u4ee5\u4e0a<\/strong> [<\/li>\n<\/ul>\n
\n\u4e0a\u9762\u7684\u5b9e\u8df5\u662f\u6211\u4eec\u5bf9webpack\u7684\u529f\u80fd\u6709\u4e86\u4e00\u4e2a\u521d\u6b65\u7684\u4e86\u89e3\uff0c\u4f46\u662f\u8981\u60f3\u719f\u7ec3\u5e94\u7528\u4e8e\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u4e00\u4e2a\u7cfb\u7edf\u7684\u5b9e\u6218\u3002\u8ba9\u6211\u4eec\u4e00\u8d77\u6446\u8131\u811a\u624b\u67b6\u5c1d\u8bd5\u81ea\u5df1\u642d\u5efa\u4e00\u4e2avue\u5f00\u53d1\u73af\u5883<\/p><\/blockquote>\n
2 \u642d\u5efavue\u5f00\u53d1\u73af\u5883<\/h1>\n
\u4e0a\u9762\u7684\u5c0f\u4f8b\u5b50\u5df2\u7ecf\u5e2e\u52a9\u800c\u6211\u4eec\u5b9e\u73b0\u4e86\u6253\u5305css\u3001\u56fe\u7247\u3001js\u3001html\u7b49\u6587\u4ef6\u3002 \u4f46\u662f\u6211\u4eec\u8fd8\u9700\u8981\u4ee5\u4e0b\u51e0\u79cd\u914d\u7f6e<\/p>\n
2.1 \u89e3\u6790.vue\u6587\u4ef6<\/h1>\nnpm i -D vue-loader vue-template-compiler vue-style-loader\r\nnpm i -S vue\r\n<\/code><\/pre>\nvue-loader \u7528\u4e8e\u89e3\u6790.vue\u6587\u4ef6vue-template-compiler \u7528\u4e8e\u7f16\u8bd1\u6a21\u677f \u914d\u7f6e\u5982\u4e0b<\/p>\n
const vueLoaderPlugin = require('vue-loader\/lib\/plugin')\r\nmodule.exports = {\r\n module:{\r\n rules:[{\r\n test:\/\\.vue$\/,\r\n use:['vue-loader']\r\n },]\r\n },\r\n resolve:{\r\n alias:{\r\n 'vue$':'vue\/dist\/vue.runtime.esm.js',\r\n ' @':path.resolve(__dirname,'..\/src')\r\n },\r\n extensions:['*','.js','.json','.vue']\r\n },\r\n plugins:[\r\n new vueLoaderPlugin()\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n2.2 \u914d\u7f6ewebpack-dev-server\u8fdb\u884c\u70ed\u66f4\u65b0<\/h1>\nnpm i -D webpack-dev-server\r\n<\/code><\/pre>\n\u914d\u7f6e\u5982\u4e0b<\/p>\n
const Webpack = require('webpack')\r\nmodule.exports = {\r\n \/\/ ...\u7701\u7565\u5176\u4ed6\u914d\u7f6e\r\n devServer:{\r\n port:3000,\r\n hot:true,\r\n contentBase:'..\/dist'\r\n },\r\n plugins:[\r\n new Webpack.HotModuleReplacementPlugin()\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n\u5b8c\u6574\u914d\u7f6e\u5982\u4e0b<\/p>\n
\/\/ webpack.config.js\r\nconst path = require('path');\r\nconst {CleanWebpackPlugin} = require('clean-webpack-plugin')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\r\nconst ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')\r\nconst vueLoaderPlugin = require('vue-loader\/lib\/plugin')\r\nconst Webpack = require('webpack')\r\nmodule.exports = {\r\n mode:'development', \/\/ \u5f00\u53d1\u6a21\u5f0f\r\n entry: {\r\n main:path.resolve(__dirname,'..\/src\/main.js'),\r\n }, \r\n output: {\r\n filename: '[name].[hash:8].js', \/\/ \u6253\u5305\u540e\u7684\u6587\u4ef6\u540d\u79f0\r\n path: path.resolve(__dirname,'..\/dist') \/\/ \u6253\u5305\u540e\u7684\u76ee\u5f55\r\n },\r\n module:{\r\n rules:[\r\n {\r\n test:\/\\.vue$\/,\r\n use:['vue-loader']\r\n },\r\n {\r\n test:\/\\.js$\/,\r\n use:{\r\n loader:'babel-loader',\r\n options:{\r\n presets:[\r\n ['@babel\/preset-env']\r\n ]\r\n }\r\n }\r\n },\r\n {\r\n test:\/\\.css$\/,\r\n use: ['vue-style-loader','css-loader',{\r\n loader:'postcss-loader',\r\n options:{\r\n plugins:[require('autoprefixer')]\r\n }\r\n }]\r\n },\r\n {\r\n test:\/\\.less$\/,\r\n use: ['vue-style-loader','css-loader',{\r\n loader:'postcss-loader',\r\n options:{\r\n plugins:[require('autoprefixer')]\r\n }\r\n },'less-loader']\r\n }\r\n ]\r\n },\r\n resolve:{\r\n alias:{\r\n 'vue$':'vue\/dist\/vue.runtime.esm.js',\r\n ' @':path.resolve(__dirname,'..\/src')\r\n },\r\n extensions:['*','.js','.json','.vue']\r\n },\r\n devServer:{\r\n port:3000,\r\n hot:true,\r\n contentBase:'..\/dist'\r\n },\r\n plugins:[\r\n new CleanWebpackPlugin(),\r\n new HtmlWebpackPlugin({\r\n template:path.resolve(__dirname,'..\/public\/index.html'),\r\n filename:'index.html'\r\n }),\r\n new vueLoaderPlugin(),\r\n new Webpack.HotModuleReplacementPlugin()\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n2.3 \u914d\u7f6e\u6253\u5305\u547d\u4ee4<\/h1>\n
\u6253\u5305\u6587\u4ef6\u5df2\u7ecf\u914d\u7f6e\u5b8c\u6bd5\uff0c\u63a5\u4e0b\u6765\u8ba9\u6211\u4eec\u6d4b\u8bd5\u4e00\u4e0b
\n\u9996\u5148\u5728src\u65b0\u5efa\u4e00\u4e2amain.js<\/p>\n
\u65b0\u5efa\u4e00\u4e2aApp.vue<\/p>\n
\u65b0\u5efa\u4e00\u4e2apublic\u6587\u4ef6\u5939\uff0c\u91cc\u9762\u65b0\u5efa\u4e00\u4e2aindex.html<\/p>\n
\u6267\u884cnpm run dev\u8fd9\u65f6\u5019\u5982\u679c\u6d4f\u89c8\u5668\u51fa\u73b0Vue\u5f00\u53d1\u73af\u5883\u8fd0\u884c\u6210\u529f\uff0c\u90a3\u4e48\u606d\u559c\u4f60\uff0c\u5df2\u7ecf\u6210\u529f\u8fc8\u51fa\u4e86\u7b2c\u4e00\u6b65<\/p>\n
2.4 \u533a\u5206\u5f00\u53d1\u73af\u5883\u4e0e\u751f\u4ea7\u73af\u5883<\/h1>\n
\u5b9e\u9645\u5e94\u7528\u5230\u9879\u76ee\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u533a\u5206\u5f00\u53d1\u73af\u5883\u4e0e\u751f\u4ea7\u73af\u5883\uff0c\u6211\u4eec\u5728\u539f\u6765webpack.config.js\u7684\u57fa\u7840\u4e0a\u518d\u65b0\u589e\u4e24\u4e2a\u6587\u4ef6<\/p>\n
\n- webpack.dev.js \u5f00\u53d1\u73af\u5883\u914d\u7f6e\u6587\u4ef6<\/li>\n<\/ul>\n
\u5f00\u53d1\u73af\u5883\u4e3b\u8981\u5b9e\u73b0\u7684\u662f\u70ed\u66f4\u65b0,\u4e0d\u8981\u538b\u7f29\u4ee3\u7801\uff0c\u5b8c\u6574\u7684sourceMap\r\n<\/code><\/pre>\n\n- webpack.prod.js \u751f\u4ea7\u73af\u5883\u914d\u7f6e\u6587\u4ef6<\/li>\n<\/ul>\n
\u751f\u4ea7\u73af\u5883\u4e3b\u8981\u5b9e\u73b0\u7684\u662f\u538b\u7f29\u4ee3\u7801\u3001\u63d0\u53d6css\u6587\u4ef6\u3001\u5408\u7406\u7684sourceMap\u3001\u5206\u5272\u4ee3\u7801\r\n\u9700\u8981\u5b89\u88c5\u4ee5\u4e0b\u6a21\u5757:\r\nnpm i -D webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin\r\n<\/code><\/pre>\n\n- webpack-merge \u5408\u5e76\u914d\u7f6e<\/li>\n
- copy-webpack-plugin \u62f7\u8d1d\u9759\u6001\u8d44\u6e90<\/li>\n
- optimize-css-assets-webpack-plugin \u538b\u7f29css<\/li>\n
- uglifyjs-webpack-plugin \u538b\u7f29js<\/li>\n<\/ul>\n
webpack mode\u8bbe\u7f6eproduction\u7684\u65f6\u5019\u4f1a\u81ea\u52a8\u538b\u7f29js\u4ee3\u7801\u3002\u539f\u5219\u4e0a\u4e0d\u9700\u8981\u5f15\u5165uglifyjs-webpack-plugin\u8fdb\u884c\u91cd\u590d\u5de5\u4f5c\u3002\u4f46\u662foptimize-css-assets-webpack-plugin\u538b\u7f29css\u7684\u540c\u65f6\u4f1a\u7834\u574f\u539f\u6709\u7684js\u538b\u7f29\uff0c\u6240\u4ee5\u8fd9\u91cc\u6211\u4eec\u5f15\u5165uglifyjs\u8fdb\u884c\u538b\u7f29<\/p><\/blockquote>\n
2.4.1 webpack.config.js<\/h1>\nconst path = require('path')\r\nconst {CleanWebpackPlugin} = require('clean-webpack-plugin')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst vueLoaderPlugin = require('vue-loader\/lib\/plugin')\r\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\")\r\nconst devMode = process.argv.indexOf('--mode=production') === -1;\r\nmodule.exports = {\r\n entry:{\r\n main:path.resolve(__dirname,'..\/src\/main.js')\r\n },\r\n output:{\r\n path:path.resolve(__dirname,'..\/dist'),\r\n filename:'js\/[name].[hash:8].js',\r\n chunkFilename:'js\/[name].[hash:8].js'\r\n },\r\n module:{\r\n rules:[\r\n {\r\n test:\/\\.js$\/,\r\n use:{\r\n loader:'babel-loader',\r\n options:{\r\n presets:['@babel\/preset-env']\r\n }\r\n },\r\n exclude:\/node_modules\/\r\n },\r\n {\r\n test:\/\\.vue$\/,\r\n use:[{\r\n loader:'vue-loader',\r\n options:{\r\n compilerOptions:{\r\n preserveWhitespace:false\r\n }\r\n }\r\n }]\r\n },\r\n {\r\n test:\/\\.css$\/,\r\n use:[{\r\n loader: devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,\r\n options:{\r\n publicPath:\"..\/dist\/css\/\",\r\n hmr:devMode\r\n }\r\n },'css-loader',{\r\n loader:'postcss-loader',\r\n options:{\r\n plugins:[require('autoprefixer')]\r\n }\r\n }]\r\n },\r\n {\r\n test:\/\\.less$\/,\r\n use:[{\r\n loader:devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,\r\n options:{\r\n publicPath:\"..\/dist\/css\/\",\r\n hmr:devMode\r\n }\r\n },'css-loader','less-loader',{\r\n loader:'postcss-loader',\r\n options:{\r\n plugins:[require('autoprefixer')]\r\n }\r\n }]\r\n },\r\n {\r\n test:\/\\.(jep?g|png|gif)$\/,\r\n use:{\r\n loader:'url-loader',\r\n options:{\r\n limit:10240,\r\n fallback:{\r\n loader:'file-loader',\r\n options:{\r\n name:'img\/[name].[hash:8].[ext]'\r\n }\r\n }\r\n }\r\n }\r\n },\r\n {\r\n test:\/\\.(mp4|webm|ogg|mp3|wav|flac|aac)(\\?.*)?$\/,\r\n use:{\r\n loader:'url-loader',\r\n options:{\r\n limit:10240,\r\n fallback:{\r\n loader:'file-loader',\r\n options:{\r\n name:'media\/[name].[hash:8].[ext]'\r\n }\r\n }\r\n }\r\n }\r\n },\r\n {\r\n test:\/\\.(woff2?|eot|ttf|otf)(\\?.*)?$\/i,\r\n use:{\r\n loader:'url-loader',\r\n options:{\r\n limit:10240,\r\n fallback:{\r\n loader:'file-loader',\r\n options:{\r\n name:'media\/[name].[hash:8].[ext]'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n ]\r\n },\r\n resolve:{\r\n alias:{\r\n 'vue$':'vue\/dist\/vue.runtime.esm.js',\r\n ' @':path.resolve(__dirname,'..\/src')\r\n },\r\n extensions:['*','.js','.json','.vue']\r\n },\r\n plugins:[\r\n new CleanWebpackPlugin(),\r\n new HtmlWebpackPlugin({\r\n template:path.resolve(__dirname,'..\/public\/index.html')\r\n }),\r\n new vueLoaderPlugin(),\r\n new MiniCssExtractPlugin({\r\n filename: devMode ? '[name].css' : '[name].[hash].css',\r\n chunkFilename: devMode ? '[id].css' : '[id].[hash].css'\r\n })\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n2.4.2 webpack.dev.js<\/h1>\nconst Webpack = require('webpack')\r\nconst webpackConfig = require('.\/webpack.config.js')\r\nconst WebpackMerge = require('webpack-merge')\r\nmodule.exports = WebpackMerge(webpackConfig,{\r\n mode:'development',\r\n devtool:'cheap-module-eval-source-map',\r\n devServer:{\r\n port:3000,\r\n hot:true,\r\n contentBase:'..\/dist'\r\n },\r\n plugins:[\r\n new Webpack.HotModuleReplacementPlugin()\r\n ]\r\n})\r\n\r\n<\/code><\/pre>\n2.4.3 webpack.prod.js<\/h1>\nconst path = require('path')\r\nconst webpackConfig = require('.\/webpack.config.js')\r\nconst WebpackMerge = require('webpack-merge')\r\nconst CopyWebpackPlugin = require('copy-webpack-plugin')\r\nconst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')\r\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin')\r\nmodule.exports = WebpackMerge(webpackConfig,{\r\n mode:'production',\r\n devtool:'cheap-module-source-map',\r\n plugins:[\r\n new CopyWebpackPlugin([{\r\n from:path.resolve(__dirname,'..\/public'),\r\n to:path.resolve(__dirname,'..\/dist')\r\n }]),\r\n ],\r\n optimization:{\r\n minimizer:[\r\n new UglifyJsPlugin({\/\/\u538b\u7f29js\r\n cache:true,\r\n parallel:true,\r\n sourceMap:true\r\n }),\r\n new OptimizeCssAssetsPlugin({})\r\n ],\r\n splitChunks:{\r\n chunks:'all',\r\n cacheGroups:{\r\n libs: {\r\n name: \"chunk-libs\",\r\n test: \/[\\\\\/]node_modules[\\\\\/]\/,\r\n priority: 10,\r\n chunks: \"initial\" \/\/ \u53ea\u6253\u5305\u521d\u59cb\u65f6\u4f9d\u8d56\u7684\u7b2c\u4e09\u65b9\r\n }\r\n }\r\n }\r\n }\r\n})\r\n\r\n<\/code><\/pre>\n2.5 \u4f18\u5316webpack\u914d\u7f6e<\/h1>\n
\u770b\u5230\u8fd9\u91cc\u4f60\u6216\u8bb8\u6709\u4e9b\u7d2f\u4e86\uff0c\u4f46\u662f\u8981\u60f3\u83b7\u53d6\u66f4\u597d\u7684offer,\u66f4\u9ad8\u7684\u85aa\u6c34\uff0c\u4e0b\u9762\u5fc5\u987b\u7ee7\u7eed\u6df1\u5165<\/p>\n
\u4f18\u5316\u914d\u7f6e\u5bf9\u6211\u4eec\u6765\u8bf4\u975e\u5e38\u6709\u5b9e\u9645\u610f\u4e49\uff0c\u8fd9\u5b9e\u9645\u5173\u7cfb\u5230\u4f60\u6253\u5305\u51fa\u6765\u6587\u4ef6\u7684\u5927\u5c0f\uff0c\u6253\u5305\u7684\u901f\u5ea6\u7b49\u3002 \u5177\u4f53\u4f18\u5316\u53ef\u4ee5\u5206\u4e3a\u4ee5\u4e0b\u51e0\u70b9\uff1a<\/p>\n
2.5.1 \u4f18\u5316\u6253\u5305\u901f\u5ea6<\/h1>\n\u6784\u5efa\u901f\u5ea6\u6307\u7684\u662f\u6211\u4eec\u6bcf\u6b21\u4fee\u6539\u4ee3\u7801\u540e\u70ed\u66f4\u65b0\u7684\u901f\u5ea6\u4ee5\u53ca\u53d1\u5e03\u524d\u6253\u5305\u6587\u4ef6\u7684\u901f\u5ea6\u3002<\/p><\/blockquote>\n
2.5.1.1 \u5408\u7406\u7684\u914d\u7f6emode\u53c2\u6570\u4e0edevtool\u53c2\u6570<\/h1>\n
mode\u53ef\u8bbe\u7f6edevelopment production\u4e24\u4e2a\u53c2\u6570\u5982\u679c\u6ca1\u6709\u8bbe\u7f6e\uff0cwebpack4 \u4f1a\u5c06 mode \u7684\u9ed8\u8ba4\u503c\u8bbe\u7f6e\u4e3a productionproduction\u6a21\u5f0f\u4e0b\u4f1a\u8fdb\u884ctree shaking(\u53bb\u9664\u65e0\u7528\u4ee3\u7801)\u548cuglifyjs(\u4ee3\u7801\u538b\u7f29\u6df7\u6dc6)<\/p>\n
2.5.1.2 \u7f29\u5c0f\u6587\u4ef6\u7684\u641c\u7d22\u8303\u56f4(\u914d\u7f6einclude exclude alias noParse extensions)<\/h1>\n\n- alias: \u5f53\u6211\u4eec\u4ee3\u7801\u4e2d\u51fa\u73b0 import ‘vue’\u65f6\uff0c webpack\u4f1a\u91c7\u7528\u5411\u4e0a\u9012\u5f52\u641c\u7d22\u7684\u65b9\u5f0f\u53bbnode_modules \u76ee\u5f55\u4e0b\u627e\u3002\u4e3a\u4e86\u51cf\u5c11\u641c\u7d22\u8303\u56f4\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u544a\u8bc9webpack\u53bb\u54ea\u4e2a\u8def\u5f84\u4e0b\u67e5\u627e\u3002\u4e5f\u5c31\u662f\u522b\u540d(alias)\u7684\u914d\u7f6e\u3002<\/li>\n
- include exclude \u540c\u6837\u914d\u7f6einclude exclude\u4e5f\u53ef\u4ee5\u51cf\u5c11webpack loader\u7684\u641c\u7d22\u8f6c\u6362\u65f6\u95f4\u3002<\/li>\n
- noParse \u5f53\u6211\u4eec\u4ee3\u7801\u4e2d\u4f7f\u7528\u5230import jq from ‘jquery’\u65f6\uff0cwebpack\u4f1a\u53bb\u89e3\u6790jq\u8fd9\u4e2a\u5e93\u662f\u5426\u6709\u4f9d\u8d56\u5176\u4ed6\u7684\u5305\u3002\u4f46\u662f\u6211\u4eec\u5bf9\u7c7b\u4f3cjquery\u8fd9\u7c7b\u4f9d\u8d56\u5e93\uff0c\u4e00\u822c\u4f1a\u8ba4\u4e3a\u4e0d\u4f1a\u5f15\u7528\u5176\u4ed6\u7684\u5305(\u7279\u6b8a\u9664\u5916,\u81ea\u884c\u5224\u65ad)\u3002\u589e\u52a0noParse\u5c5e\u6027,\u544a\u8bc9webpack\u4e0d\u5fc5\u89e3\u6790\uff0c\u4ee5\u6b64\u589e\u52a0\u6253\u5305\u901f\u5ea6\u3002<\/li>\n
- extensions webpack\u4f1a\u6839\u636eextensions\u5b9a\u4e49\u7684\u540e\u7f00\u67e5\u627e\u6587\u4ef6(\u9891\u7387\u8f83\u9ad8\u7684\u6587\u4ef6\u7c7b\u578b\u4f18\u5148\u5199\u5728\u524d\u9762)<\/li>\n<\/ul>\n
2.5.1.3 \u4f7f\u7528HappyPack\u5f00\u542f\u591a\u8fdb\u7a0bLoader\u8f6c\u6362<\/h1>\n\u5728webpack\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u5b9e\u9645\u4e0a\u8017\u8d39\u65f6\u95f4\u5927\u591a\u6570\u7528\u5728loader\u89e3\u6790\u8f6c\u6362\u4ee5\u53ca\u4ee3\u7801\u7684\u538b\u7f29\u4e2d\u3002\u65e5\u5e38\u5f00\u53d1\u4e2d\u6211\u4eec\u9700\u8981\u4f7f\u7528Loader\u5bf9js\uff0ccss\uff0c\u56fe\u7247\uff0c\u5b57\u4f53\u7b49\u6587\u4ef6\u505a\u8f6c\u6362\u64cd\u4f5c\uff0c\u5e76\u4e14\u8f6c\u6362\u7684\u6587\u4ef6\u6570\u636e\u91cf\u4e5f\u662f\u975e\u5e38\u5927\u3002\u7531\u4e8ejs\u5355\u7ebf\u7a0b\u7684\u7279\u6027\u4f7f\u5f97\u8fd9\u4e9b\u8f6c\u6362\u64cd\u4f5c\u4e0d\u80fd\u5e76\u53d1\u5904\u7406\u6587\u4ef6\uff0c\u800c\u662f\u9700\u8981\u4e00\u4e2a\u4e2a\u6587\u4ef6\u8fdb\u884c\u5904\u7406\u3002HappyPack\u7684\u57fa\u672c\u539f\u7406\u662f\u5c06\u8fd9\u90e8\u5206\u4efb\u52a1\u5206\u89e3\u5230\u591a\u4e2a\u5b50\u8fdb\u7a0b\u4e2d\u53bb\u5e76\u884c\u5904\u7406\uff0c\u5b50\u8fdb\u7a0b\u5904\u7406\u5b8c\u6210\u540e\u628a\u7ed3\u679c\u53d1\u9001\u5230\u4e3b\u8fdb\u7a0b\u4e2d\uff0c\u4ece\u800c\u51cf\u5c11\u603b\u7684\u6784\u5efa\u65f6\u95f4<\/p><\/blockquote>\n
npm i -D happypack\r\n<\/code><\/pre>\n2.5.1.4 \u4f7f\u7528webpack-parallel-uglify-plugin \u589e\u5f3a\u4ee3\u7801\u538b\u7f29<\/h1>\n\u4e0a\u9762\u5bf9\u4e8eloader\u8f6c\u6362\u5df2\u7ecf\u505a\u4f18\u5316\uff0c\u90a3\u4e48\u4e0b\u9762\u8fd8\u6709\u53e6\u4e00\u4e2a\u96be\u70b9\u5c31\u662f\u4f18\u5316\u4ee3\u7801\u7684\u538b\u7f29\u65f6\u95f4\u3002<\/p><\/blockquote>\n
npm i -D webpack-parallel-uglify-plugin\r\n<\/code><\/pre>\n2.5.1.5 \u62bd\u79bb\u7b2c\u4e09\u65b9\u6a21\u5757<\/h1>\n\u5bf9\u4e8e\u5f00\u53d1\u9879\u76ee\u4e2d\u4e0d\u7ecf\u5e38\u4f1a\u53d8\u66f4\u7684\u9759\u6001\u4f9d\u8d56\u6587\u4ef6\u3002\u7c7b\u4f3c\u4e8e\u6211\u4eec\u7684elementUi\u3001vue\u5168\u5bb6\u6876\u7b49\u7b49\u3002\u56e0\u4e3a\u5f88\u5c11\u4f1a\u53d8\u66f4\uff0c\u6240\u4ee5\u6211\u4eec\u4e0d\u5e0c\u671b\u8fd9\u4e9b\u4f9d\u8d56\u8981\u88ab\u96c6\u6210\u5230\u6bcf\u4e00\u6b21\u7684\u6784\u5efa\u903b\u8f91\u4e2d\u53bb\u3002 \u8fd9\u6837\u505a\u7684\u597d\u5904\u662f\u6bcf\u6b21\u66f4\u6539\u6211\u672c\u5730\u4ee3\u7801\u7684\u6587\u4ef6\u7684\u65f6\u5019\uff0cwebpack\u53ea\u9700\u8981\u6253\u5305\u6211\u9879\u76ee\u672c\u8eab\u7684\u6587\u4ef6\u4ee3\u7801\uff0c\u800c\u4e0d\u4f1a\u518d\u53bb\u7f16\u8bd1\u7b2c\u4e09\u65b9\u5e93\u3002\u4ee5\u540e\u53ea\u8981\u6211\u4eec\u4e0d\u5347\u7ea7\u7b2c\u4e09\u65b9\u5305\u7684\u65f6\u5019\uff0c\u90a3\u4e48webpack\u5c31\u4e0d\u4f1a\u5bf9\u8fd9\u4e9b\u5e93\u53bb\u6253\u5305\uff0c\u8fd9\u6837\u53ef\u4ee5\u5feb\u901f\u7684\u63d0\u9ad8\u6253\u5305\u7684\u901f\u5ea6\u3002<\/p><\/blockquote>\n
\u8fd9\u91cc\u6211\u4eec\u4f7f\u7528webpack\u5185\u7f6e\u7684DllPlugin DllReferencePlugin\u8fdb\u884c\u62bd\u79bb\u5728\u4e0ewebpack\u914d\u7f6e\u6587\u4ef6\u540c\u7ea7\u76ee\u5f55\u4e0b\u65b0\u5efawebpack.dll.config.js \u4ee3\u7801\u5982\u4e0b<\/p>\n
\/\/ webpack.dll.config.js\r\nconst path = require(\"path\");\r\nconst webpack = require(\"webpack\");\r\nmodule.exports = {\r\n \/\/ \u4f60\u60f3\u8981\u6253\u5305\u7684\u6a21\u5757\u7684\u6570\u7ec4\r\n entry: {\r\n vendor: ['vue','element-ui'] \r\n },\r\n output: {\r\n path: path.resolve(__dirname, 'static\/js'), \/\/ \u6253\u5305\u540e\u6587\u4ef6\u8f93\u51fa\u7684\u4f4d\u7f6e\r\n filename: '[name].dll.js',\r\n library: '[name]_library' \r\n \/\/ \u8fd9\u91cc\u9700\u8981\u548cwebpack.DllPlugin\u4e2d\u7684`name: '[name]_library',`\u4fdd\u6301\u4e00\u81f4\u3002\r\n },\r\n plugins: [\r\n new webpack.DllPlugin({\r\n path: path.resolve(__dirname, '[name]-manifest.json'),\r\n name: '[name]_library', \r\n context: __dirname\r\n })\r\n ]\r\n};\r\n\r\n<\/code><\/pre>\n\u5728package.json\u4e2d\u914d\u7f6e\u5982\u4e0b\u547d\u4ee4<\/p>\n
\"dll\": \"webpack --config build\/webpack.dll.config.js\"\r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765\u5728\u6211\u4eec\u7684webpack.config.js\u4e2d\u589e\u52a0\u4ee5\u4e0b\u4ee3\u7801<\/p>\n
module.exports = {\r\n plugins: [\r\n new webpack.DllReferencePlugin({\r\n context: __dirname,\r\n manifest: require('.\/vendor-manifest.json')\r\n }),\r\n new CopyWebpackPlugin([ \/\/ \u62f7\u8d1d\u751f\u6210\u7684\u6587\u4ef6\u5230dist\u76ee\u5f55 \u8fd9\u6837\u6bcf\u6b21\u4e0d\u5fc5\u624b\u52a8\u53bbcv\r\n {from: 'static', to:'static'}\r\n ]),\r\n ]\r\n};\r\n\r\n<\/code><\/pre>\n\u6267\u884c<\/p>\n
npm run dll\r\n<\/code><\/pre>\n\u4f1a\u53d1\u73b0\u751f\u6210\u4e86\u6211\u4eec\u9700\u8981\u7684\u96c6\u5408\u7b2c\u4e09\u5730\u65b9 \u4ee3\u7801\u7684vendor.dll.js \u6211\u4eec\u9700\u8981\u5728html\u6587\u4ef6\u4e2d\u624b\u52a8\u5f15\u5165\u8fd9\u4e2ajs\u6587\u4ef6<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n <title>\u8001yuan<\/title>\r\n <script src=\"static\/js\/vendor.dll.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"app\"><\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/code><\/pre>\n\u8fd9\u6837\u5982\u679c\u6211\u4eec\u6ca1\u6709\u66f4\u65b0\u7b2c\u4e09\u65b9\u4f9d\u8d56\u5305\uff0c\u5c31\u4e0d\u5fc5npm run dll\u3002\u76f4\u63a5\u6267\u884cnpm run dev npm run build\u7684\u65f6\u5019\u4f1a\u53d1\u73b0\u6211\u4eec\u7684\u6253\u5305\u901f\u5ea6\u660e\u663e\u6709\u6240\u63d0\u5347\u3002\u56e0\u4e3a\u6211\u4eec\u5df2\u7ecf\u901a\u8fc7dllPlugin\u5c06\u7b2c\u4e09\u65b9\u4f9d\u8d56\u5305\u62bd\u79bb\u51fa\u6765\u4e86\u3002<\/p>\n
2.5.1.6 \u914d\u7f6e\u7f13\u5b58<\/h1>\n\u6211\u4eec\u6bcf\u6b21\u6267\u884c\u6784\u5efa\u90fd\u4f1a\u628a\u6240\u6709\u7684\u6587\u4ef6\u90fd\u91cd\u590d\u7f16\u8bd1\u4e00\u904d\uff0c\u8fd9\u6837\u7684\u91cd\u590d\u5de5\u4f5c\u662f\u5426\u53ef\u4ee5\u88ab\u7f13\u5b58\u4e0b\u6765\u5462\uff0c\u7b54\u6848\u662f\u53ef\u4ee5\u7684\uff0c\u76ee\u524d\u5927\u90e8\u5206 loader \u90fd\u63d0\u4f9b\u4e86cache \u914d\u7f6e\u9879\u3002\u6bd4\u5982\u5728 babel-loader \u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6ecacheDirectory \u6765\u5f00\u542f\u7f13\u5b58\uff0cbabel-loader?cacheDirectory=true \u5c31\u4f1a\u5c06\u6bcf\u6b21\u7684\u7f16\u8bd1\u7ed3\u679c\u5199\u8fdb\u786c\u76d8\u6587\u4ef6\uff08\u9ed8\u8ba4\u662f\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u7684node_modules\/.cache\/babel-loader\u76ee\u5f55\u5185\uff0c\u5f53\u7136\u4f60\u4e5f\u53ef\u4ee5\u81ea\u5b9a\u4e49\uff09<\/p><\/blockquote>\n
\u4f46\u5982\u679c loader \u4e0d\u652f\u6301\u7f13\u5b58\u5462\uff1f\u6211\u4eec\u4e5f\u6709\u65b9\u6cd5,\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7cache-loader \uff0c\u5b83\u6240\u505a\u7684\u4e8b\u60c5\u5f88\u7b80\u5355\uff0c\u5c31\u662f babel-loader \u5f00\u542f cache \u540e\u505a\u7684\u4e8b\u60c5\uff0c\u5c06 loader \u7684\u7f16\u8bd1\u7ed3\u679c\u5199\u5165\u786c\u76d8\u7f13\u5b58\u3002\u518d\u6b21\u6784\u5efa\u4f1a\u5148\u6bd4\u8f83\u4e00\u4e0b\uff0c\u5982\u679c\u6587\u4ef6\u8f83\u4e4b\u524d\u7684\u6ca1\u6709\u53d1\u751f\u53d8\u5316\u5219\u4f1a\u76f4\u63a5\u4f7f\u7528\u7f13\u5b58\u3002\u4f7f\u7528\u65b9\u6cd5\u5982\u5b98\u65b9 demo \u6240\u793a\uff0c\u5728\u4e00\u4e9b\u6027\u80fd\u5f00\u9500\u8f83\u5927\u7684 loader \u4e4b\u524d\u6dfb\u52a0\u6b64 loader\u5373\u53ef<\/p>\n
npm i -D cache-loader\r\n<\/code><\/pre>\n2.5.2 \u4f18\u5316\u6253\u5305\u6587\u4ef6\u4f53\u79ef<\/h1>\n\u6253\u5305\u7684\u901f\u5ea6\u6211\u4eec\u662f\u8fdb\u884c\u4e86\u4f18\u5316\uff0c\u4f46\u662f\u6253\u5305\u540e\u7684\u6587\u4ef6\u4f53\u79ef\u5374\u662f\u5341\u5206\u5927\uff0c\u9020\u6210\u4e86\u9875\u9762\u52a0\u8f7d\u7f13\u6162\uff0c\u6d6a\u8d39\u6d41\u91cf\u7b49\uff0c\u63a5\u4e0b\u6765\u8ba9\u6211\u4eec\u4ece\u6587\u4ef6\u4f53\u79ef\u4e0a\u7ee7\u7eed\u4f18\u5316<\/p><\/blockquote>\n
2.5.2.1 \u5f15\u5165webpack-bundle-analyzer\u5206\u6790\u6253\u5305\u540e\u7684\u6587\u4ef6<\/h1>\n
webpack-bundle-analyzer\u5c06\u6253\u5305\u540e\u7684\u5185\u5bb9\u675f\u5c55\u793a\u4e3a\u65b9\u4fbf\u4ea4\u4e92\u7684\u76f4\u89c2\u6811\u72b6\u56fe\uff0c\u8ba9\u6211\u4eec\u77e5\u9053\u6211\u4eec\u6240\u6784\u5efa\u5305\u4e2d\u771f\u6b63\u5f15\u5165\u7684\u5185\u5bb9<\/p>\n
npm i -D webpack-bundle-analyzer\r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765\u5728package.json\u91cc\u914d\u7f6e\u542f\u52a8\u547d\u4ee4<\/p>\n
\"analyz\": \"NODE_ENV=production npm_config_report=true npm run build\" \r\n<\/code><\/pre>\nwindows\u8bf7\u5b89\u88c5npm i -D cross-env<\/p>\n
\"analyz\": \"cross-env NODE_ENV=production npm_config_report=true npm run build\" \r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765npm run analyz\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u6253\u5f00\u6587\u4ef6\u4f9d\u8d56\u56fe\u7684\u7f51\u9875<\/p>\n
2.5.2.3 externals<\/h1>\n\u6309\u7167\u5b98\u65b9\u6587\u6863\u7684\u89e3\u91ca\uff0c\u5982\u679c\u6211\u4eec\u60f3\u5f15\u7528\u4e00\u4e2a\u5e93\uff0c\u4f46\u662f\u53c8\u4e0d\u60f3\u8ba9webpack\u6253\u5305\uff0c\u5e76\u4e14\u53c8\u4e0d\u5f71\u54cd\u6211\u4eec\u5728\u7a0b\u5e8f\u4e2d\u4ee5CMD\u3001AMD\u6216\u8005window\/global\u5168\u5c40\u7b49\u65b9\u5f0f\u8fdb\u884c\u4f7f\u7528\uff0c\u90a3\u5c31\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6eExternals\u3002\u8fd9\u4e2a\u529f\u80fd\u4e3b\u8981\u662f\u7528\u5728\u521b\u5efa\u4e00\u4e2a\u5e93\u7684\u65f6\u5019\u7528\u7684\uff0c\u4f46\u662f\u4e5f\u53ef\u4ee5\u5728\u6211\u4eec\u9879\u76ee\u5f00\u53d1\u4e2d\u5145\u5206\u4f7f\u7528 Externals\u7684\u65b9\u5f0f\uff0c\u6211\u4eec\u5c06\u8fd9\u4e9b\u4e0d\u9700\u8981\u6253\u5305\u7684\u9759\u6001\u8d44\u6e90\u4ece\u6784\u5efa\u903b\u8f91\u4e2d\u5254\u9664\u51fa\u53bb\uff0c\u800c\u4f7f\u7528 CDN \u7684\u65b9\u5f0f\uff0c\u53bb\u5f15\u7528\u5b83\u4eec\u3002<\/p><\/blockquote>\n
\u6709\u65f6\u6211\u4eec\u5e0c\u671b\u6211\u4eec\u901a\u8fc7script\u5f15\u5165\u7684\u5e93\uff0c\u5982\u7528CDN\u7684\u65b9\u5f0f\u5f15\u5165\u7684jquery\uff0c\u6211\u4eec\u5728\u4f7f\u7528\u65f6\uff0c\u4f9d\u65e7\u7528require\u7684\u65b9\u5f0f\u6765\u4f7f\u7528\uff0c\u4f46\u662f\u5374\u4e0d\u5e0c\u671bwebpack\u5c06\u5b83\u53c8\u7f16\u8bd1\u8fdb\u6587\u4ef6\u4e2d\u3002\u8fd9\u91cc\u5b98\u7f51\u6848\u4f8b\u5df2\u7ecf\u8db3\u591f\u6e05\u6670\u660e\u4e86\uff0c\u5927\u5bb6\u6709\u5174\u8da3\u53ef\u4ee5\u70b9\u51fb\u4e86\u89e3<\/p>\n
webpack \u5b98\u7f51\u6848\u4f8b\u5982\u4e0b<\/p>\n
<script\r\n src=\"https:\/\/code.jquery.com\/jquery-3.1.0.js\"\r\n integrity=\"sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=\"\r\n crossorigin=\"anonymous\">\r\n<\/script>\r\n\r\n<\/code><\/pre>\nmodule.exports = {\r\n \/\/...\r\n externals: {\r\n jquery: 'jQuery'\r\n }\r\n};\r\n\r\n<\/code><\/pre>\nimport $ from 'jquery';\r\n$('.my-element').animate(\/* ... *\/);\r\n\r\n<\/code><\/pre>\n2.5.2.3 Tree-shaking<\/h1>\n\u8fd9\u91cc\u5355\u72ec\u63d0\u4e00\u4e0btree-shaking,\u662f\u56e0\u4e3a\u8fd9\u91cc\u6709\u4e2a\u5751\u3002tree-shaking\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u7528\u6765\u6e05\u9664\u4ee3\u7801\u4e2d\u65e0\u7528\u7684\u90e8\u5206\u3002\u76ee\u524d\u5728webpack4 \u6211\u4eec\u8bbe\u7f6emode\u4e3aproduction\u7684\u65f6\u5019\u5df2\u7ecf\u81ea\u52a8\u5f00\u542f\u4e86tree-shaking\u3002\u4f46\u662f\u8981\u60f3\u4f7f\u5176\u751f\u6548\uff0c\u751f\u6210\u7684\u4ee3\u7801\u5fc5\u987b\u662fES6\u6a21\u5757\u3002\u4e0d\u80fd\u4f7f\u7528\u5176\u5b83\u7c7b\u578b\u7684\u6a21\u5757\u5982CommonJS\u4e4b\u6d41\u3002\u5982\u679c\u4f7f\u7528Babel\u7684\u8bdd\uff0c\u8fd9\u91cc\u6709\u4e00\u4e2a\u5c0f\u95ee\u9898\uff0c\u56e0\u4e3aBabel\u7684\u9884\u6848\uff08preset\uff09\u9ed8\u8ba4\u4f1a\u5c06\u4efb\u4f55\u6a21\u5757\u7c7b\u578b\u90fd\u8f6c\u8bd1\u6210CommonJS\u7c7b\u578b\uff0c\u8fd9\u6837\u4f1a\u5bfc\u81f4tree-shaking\u5931\u6548\u3002\u4fee\u6b63\u8fd9\u4e2a\u95ee\u9898\u4e5f\u5f88\u7b80\u5355\uff0c\u5728.babelrc\u6587\u4ef6\u6216\u5728webpack.config.js\u6587\u4ef6\u4e2d\u8bbe\u7f6emodules\uff1a false\u5c31\u597d\u4e86<\/p><\/blockquote>\n
\/\/ .babelrc\r\n{\r\n \"presets\": [\r\n [\"@babel\/preset-env\",\r\n {\r\n \"modules\": false\r\n }\r\n ]\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n\u6216\u8005<\/p>\n
\/\/ webpack.config.js\r\n\r\nmodule: {\r\n rules: [\r\n {\r\n test: \/\\.js$\/,\r\n use: {\r\n loader: 'babel-loader',\r\n options: {\r\n presets: ['@babel\/preset-env', { modules: false }]\r\n }\r\n }\uff0c\r\n exclude: \/(node_modules)\/\r\n }\r\n ]\r\n}\r\n\r\n<\/code><\/pre>\n\u7ecf\u5386\u8fc7\u4e0a\u9762\u4e24\u4e2a\u7cfb\u5217\u7684\u6d17\u793c\uff0c\u5230\u73b0\u5728\u6211\u4eec\u6210\u4e3a\u4e86\u4e00\u540d\u5408\u683c\u7684webpack\u914d\u7f6e\u5de5\u7a0b\u5e08\u3002\u4f46\u662f\u5149\u62e7\u87ba\u4e1d\uff0c\u81ea\u8eab\u7684\u53ef\u66ff\u4ee3\u6027\u8fd8\u662f\u5f88\u9ad8\uff0c\u4e0b\u9762\u6211\u4eec\u5c06\u6df1\u5165webpack\u7684\u539f\u7406\u4e2d\u53bb<\/p><\/blockquote>\n
3 \u624b\u5199webpack\u7cfb\u5217<\/h1>\n\u7ecf\u5386\u8fc7\u4e0a\u9762\u4e24\u4e2a\u90e8\u5206\uff0c\u6211\u4eec\u5df2\u7ecf\u53ef\u4ee5\u719f\u7ec3\u7684\u8fd0\u7528\u76f8\u5173\u7684loader\u548cplugin\u5bf9\u6211\u4eec\u7684\u4ee3\u7801\u8fdb\u884c\u8f6c\u6362\u3001\u89e3\u6790\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u81ea\u5df1\u624b\u52a8\u5b9e\u73b0loader\u4e0eplugin\uff0c\u4f7f\u5176\u5728\u5e73\u65f6\u7684\u5f00\u53d1\u4e2d\u83b7\u5f97\u66f4\u591a\u7684\u4e50\u8da3\u3002<\/p><\/blockquote>\n
3.1 \u624b\u5199webpack loader<\/h1>\nloader\u4ece\u672c\u8d28\u4e0a\u6765\u8bf4\u5176\u5b9e\u5c31\u662f\u4e00\u4e2anode\u6a21\u5757\u3002\u76f8\u5f53\u4e8e\u4e00\u53f0\u69a8\u6c41\u673a(loader)\u5c06\u76f8\u5173\u7c7b\u578b\u7684\u6587\u4ef6\u4ee3\u7801(code)\u7ed9\u5b83\u3002\u6839\u636e\u6211\u4eec\u8bbe\u7f6e\u7684\u89c4\u5219\uff0c\u7ecf\u8fc7\u5b83\u7684\u4e00\u7cfb\u5217\u52a0\u5de5\u540e\u8fd8\u7ed9\u6211\u4eec\u52a0\u5de5\u597d\u7684\u679c\u6c41(code)\u3002<\/p><\/blockquote>\n
loader\u7f16\u5199\u539f\u5219<\/p>\n
![\"QQ\u255c\u256a\u2550\u255d20200419183029\"](\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/QQ\u255c\u256a\u2550\u255d20200419183029.png\")
<\/a><\/p>\n![\"QQ\u255c\u256a\u2550\u255d20200419183048\"](\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/QQ\u255c\u256a\u2550\u255d20200419183048.png\")
<\/a><\/p>\n