webpack使用

node.jsV12.18.1LTS,webpack4.43.0

一

1. 根目录webpacpk-demo
   npm init -y
   npm install --save-dev webpack
   npm install webpack webpack-cli --save-dev

2. packge.json
   增"private": true,
   删"main": “index.js”,
   This is to prevent an accidental publish of your code.

3. npm install --save lodash
   To bundle the lodash dependency with index.js

4. import _ from ‘lodash’;
   在src/index.js中导入loadsh

5. npx webpack
   src/index.js脚本入口点，dist/main.js作为输出
   
   初步可以在浏览器看到index.html内容了

6. npx webpack --config webpack.config.js
   需要在根目录添加webpack.config.js

7. 可以使用npm run build代替6的命令
   需要配置packge.json
   “scripts”: {
   “test”: “echo “Error: no test specified” && exit 1”,
   “build”: “webpack”
   }

8. npm install --save-dev style-loader css-loader
   配置webpack.config.js
   {test: /.css$/,use: [‘style-loader’, ‘css-loader’]
   就可以在index.js中导入import ‘./style.css’;

9. npm install --save-dev file-loader
   js中使用图片{test: /.(png|svg|jpg|gif)KaTeX parse error: Expected 'EOF', got '}' at position 24: …['file-loader']}̲ 字体可以使用 {test: …/, use: [‘file-loader’]}
   其他格式less等文件各自的loader
   css中路径{test: /.(png|jpg|gif)$/, use: [‘url-loader?limit=43960’]}