<\/span><\/h3>\n\n\n\n\u7531\u65bc\u4e4b\u5f8c\u6703\u5229\u7528npm\u4f86\u505a\u5c08\u6848\u7684\u5957\u4ef6\u7ba1\u7406\uff0c\u6240\u4ee5\u5c08\u6848\u5167\u7684node_modules\u4e0d\u9700\u8981\u653e\u5230\u7248\u672c\u63a7\u7ba1\u7406\u9762\uff0c\u56e0\u6b64\u6211\u5011\u9700\u8981\u65b0\u589e\u4e00\u500b.gitignore\u6a94\u6848\uff0c\u5c07\u4e0d\u9700\u8981git\u7684\u6a94\u540d\u5beb\u5728\u88e1\u9762\uff1a<\/p>\n\n\n\n
\/\/.gitignore\n\/node_modules<\/code><\/pre>\n\n\n\n<\/span>2. webpack \u6559\u5b78<\/span><\/h2>\n\n\n\n\u6839\u64da\u5b98\u65b9\u7684\u6587\u4ef6\uff0cwebpack\u662f\u4e00\u500bmodule bundler\uff0c\u4e5f\u5c31\u662f\u6240\u8b02\u7684\u6a21\u7d44\u6574\u5408\u5de5\u5177\uff0cwebpack\u4e3b\u8981\u6709\u4ee5\u4e0b\u7684\u529f\u80fd\uff1a<\/p>\n\n\n\n
- \u5c07\u5c08\u6848\u7684js\u6253\u5305\u6210\u4e00\u500bjs\u6a94\u6848<\/li>
- \u5c07css\u548cjs\u6a94\u6848\u58d3\u7e2e<\/li>
- \u7528ES6\u4ee5\u4e0a\u7684\u8a9e\u6cd5\u7de8\u8b6fjs<\/li>
- \u4f7f\u7528\u5916\u639b\u4f86\u81ea\u52d5\u5f15\u5165css\u3001js\u6a94<\/li><\/ul>\n\n\n\n
<\/span>2.1 \u5efa\u7f6ewebpack\u74b0\u5883<\/span><\/h3>\n\n\n\n\u9996\u5148\u521d\u59cb\u5316npm<\/p>\n\n\n\n
$ npm init\n<\/code><\/pre>\n\n\n\n\u63a5\u8457\u5229\u7528npm\u5b89\u88ddwebpack\u5957\u4ef6<\/p>\n\n\n\n
$ npm install --save-dev webpack webpack-cli<\/code><\/pre>\n\n\n\n\u65b0\u589ewebpack\u8a2d\u5b9a\u6a94\uff1awebpack.config.js<\/p>\n\n\n\n
\/\/webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n mode: 'development',\n \/\/\u6539\u70ba'production'\u5247\u6703\u81ea\u52d5\u58d3\u7e2e\u6a94\u6848\n entry: '.\/src\/index.js',\n \/\/bundle\u7684\u9032\u5165\u9ede\n output: {\n path: path.resolve(__dirname, 'dist'),\n \/\/\u6253\u5305\u5f8c\u7684\u6a94\u6848\u4f4d\u7f6e\uff0c\u4ee5\u6b64\u70ba\u4f8b\u6703\u653e\u5728\u540d\u70badist\u7684\u8cc7\u6599\u593e\n filename: 'static\/js\/[name].[hash].js'\n \/\/\u6253\u5305\u5f8c\u7684\u6a94\u6848\u540d\u7a31\n }\n};<\/code><\/pre>\n\n\n\n\u9019\u908a\u8981\u6ce8\u610f\u7684\u662f\uff0cmode\u9810\u8a2d\u662f’production’\uff0cwebpack\u6703\u81ea\u52d5\u5c07\u6a94\u6848\u58d3\u7e2e\uff0c\u56e0\u6b64\u770b\u5230\u6253\u5305\u7684\u6a94\u6848\u6703\u662f\u7d93\u904e\u66ff\u63db\u904e\u5f8c\u7684\u8b8a\u6578\u8207\u4e00\u4e9b\u770b\u4e0d\u592a\u61c2\u5f97\u8a9e\u6cd5\uff0c\u5982\u679c\u628amode\u6539\u70ba’development’\u958b\u767c\u6a21\u5f0f\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u539f\u672c\u7684\u8b8a\u6578\u548c\u8a9e\u6cd5\u4e86\u3002<\/p>\n\n\n\n
\u4e00\u822c\u800c\u8a00\uff0c\u5728\u5c08\u6848\u5e95\u4e0b\u6703\u6709\u5169\u500b\u8cc7\u6599\u593e\uff0c\u5206\u5225\u662fsrc\u548cdist\uff0csrc\u653e\u7684\u662f\u672a\u7de8\u8b6f\u904e\u7684\u6a94\u6848\uff0c\u53ef\u80fd\u662fSCSS\u3001\u4f7f\u7528ES6\u8a9e\u6cd5\u7684js\u6a94\u3001react\u7b49\u7b49\uff0cdist\u653e\u7684\u5247\u662f\u7d93\u904ewebpack\u6253\u5305\u6216\u7de8\u8b6f\u904e\u7684\u6a94\u6848\uff0cbundle.js\u3001min.css\u7b49\u7b49\uff0c\u662f\u700f\u89bd\u5668\u770b\u5f97\u61c2\u7684HTML\u3001CSS\u548cJavaScript\u3002<\/p>\n\n\n\n
<\/span>2.2 \u4fee\u6539package.json<\/span><\/h3>\n\n\n\n\u4fee\u6539package.json\uff0c\u4ee5\u4fbf\u5feb\u901f\u57f7\u884c\u6307\u4ee4<\/p>\n\n\n\n
\/\/package.json\n\"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"build\": \"webpack --mode production\",\n \"dev\": \"webpack --mode development\"\n},<\/code><\/pre>\n\n\n\n\u4f7f\u7528\u300cnpm run build\u300d\u548c\u300cnpm run dev\u300d\uff0c\u4ee5\u4fbf\u5feb\u901f\u57f7\u884c\u5169\u7a2e\u4e0d\u540c\u7684\u6a21\u5f0f\u3002<\/p>\n\n\n\n
<\/span>2.3 \u5f15\u5165module\uff1aBabel<\/span><\/h3>\n\n\n\n\u5728\u958b\u767c\u7684\u904e\u7a0b\u4e2d\uff0c\u901a\u5e38\u6703\u4f7f\u7528\u5230ES6\u4ee5\u4e0a\u7684\u8a9e\u6cd5\uff0c\u9019\u6642\u5019\u5c31\u9700\u8981Babel\u5c07\u6211\u5011\u7684js\u6a94\u7de8\u8b6f\u70ba\u700f\u89bd\u5668\u53ef\u904b\u884c\u7684\u7248\u672c\uff0c\u63a5\u4e0b\u4f86\u8981\u5c07Babel\u5f15\u5165\u5230\u6211\u5011\u7684\u5c08\u6848\u4e2d\u3002<\/p>\n\n\n\n
\u7528npm\u4f86\u5b89\u88ddbabel\u76f8\u95dc\u7684module\u548cloader\u3002<\/p>\n\n\n\n
$ npm install --save-dev @babel\/core babel-loader @babel\/preset-env<\/code><\/pre>\n\n\n\n\u5728\u5c08\u6848\u7684\u6839\u76ee\u9304\u65b0\u589e\u4e00\u500b.babelrc\u8a2d\u5b9a\u6a94\uff1a<\/p>\n\n\n\n
{\n \"presets\": [\"@babel\/preset-env\"]\n}\n<\/code><\/pre>\n\n\n\n\u63a5\u8457\u4fee\u6539webpack.config.js\uff1a<\/p>\n\n\n\n
\/\/webpack.config.js\nmodule: {\n rules: [\n \/\/\u6240\u6709.js\u6a94\u90fd\u6703\u7528Babel\u7de8\u8b6f\n {\n test: \/\\.js$\/i,\n exclude: \/node_modules\/,\n use: ['babel-loader']\n }\n ]\n }<\/code><\/pre>\n\n\n\nwebpack\u6703\u5c07\u5c08\u6848\u5167\u6240\u6709\u7684.js\u6a94\u4f7f\u7528Babel\u7de8\u8b6f\u3002<\/p>\n\n\n\n
<\/span>2.4 \u5f15\u5165module\uff1aCSS\u3001SCSS<\/span><\/h3>\n\n\n\nCSS\u9810\u8655\u7406\u5668\u5df2\u662f\u524d\u7aef\u958b\u767c\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u5de5\u5177\u4e86\uff0c\u63a5\u4e0b\u4f86\u5c31\u4f86\u8aaa\u660e\u8981\u5982\u4f55\u5f15\u5165\u6700\u666e\u904d\u4f7f\u7528\u7684Sass\/SCSS \u4ee5\u53caCSS module\u3002<\/p>\n\n\n\n
\u7528npm\u4f86\u5b89\u88ddSCSS\u548cCSS\u76f8\u95dc\u7684\u5957\u4ef6\u3002<\/p>\n\n\n\n
$ npm install --save-dev css-loader style-loader\n$ npm install --save-dev sass-loader dart-sass\n<\/code><\/pre>\n\n\n\n\u4fee\u6539webpack.config.js\uff1a<\/p>\n\n\n\n
\/\/webpack.config.js \nmodule: {\n rules: [\n {\n test: \/\\.js$\/i,\n exclude: \/node_modules\/,\n use: ['babel-loader']\n },\n \/\/\u7528css loader\u4f86\u8655\u7406css\u6a94\u6848\n {\n test: \/\\.css$\/i,\n use: ['style-loader', 'css-loader']\n },\n \/\/\u7528sass loader\u4f86\u8655\u7406sass\u6216scss\u6a94\u6848\n {\n test: \/\\.s[ac]ss$\/i,\n use: ['style-loader', 'css-loader', 'sass-loader']\n }\n ]\n}<\/code><\/pre>\n\n\n\n\u5728webpack\u4e2dloader\u7684\u9806\u5e8f\u662f\u5f9e\u5f8c\u5230\u524d\uff0c\u4ee5sass\u70ba\u4f8b\uff0cwebpack\u6703\u5148\u7528sass loader\u8655\u7406sass\u6a94(\u5c07sass\u6a94\u7de8\u8b6f\u6210css\u6a94)\uff0c\u518d\u7528css loader(\u5c07css\u6a94\u7de8\u8b6f\u6210js\u6a94)\uff0c\u6700\u5f8c\u5247\u662fstyle loader(\u5728DOM\u5143\u4ef6\u63d2\u5165style\u6a19\u7c64\uff0c\u518d\u7f6e\u5165css\u6a23\u5f0f)\uff0c\u56e0\u6b64\u9806\u5e8f\u4e0d\u80fd\u66f4\u6539\uff0c\u5426\u5247\u6703\u51fa\u932f\u3002<\/p>\n\n\n\n
\u5225\u5fd8\u4e86\u5728bundle\u7684\u9032\u5165\u9ede\u5f15\u5165css\u6a94\u6216scss\u6a94\uff1a<\/p>\n\n\n\n
\/\/index.js\nimport '.\/css\/style.scss';<\/code><\/pre>\n\n\n\n