使用Webpack开发项目所需要的一些配置

使用Webpack开发项目所需要的一些配置

斜体为非基本配置

First step:

1. 三大件：
   • webpack
   • webpack-cli
   • webpack-dev-server

Second step:

1. 处理JS -> ES6 -> ES5（转码器）

   • babel-loader@7

   • babel-core

   • babel-preset-env

   • babel-plugin-transform-runtime

   • babel-plugin-transform-decorators

   • babel-plugin-transform-decorators-legacy

Thrid step:

1. 处理scss less->style->css

   • sass-loader
   • node-sass
   • css-loader
   • style-loader

Forth step:

1. 模板.ejs与.tpl等文件解析为.html（模板解析器）

   • ejs-loader tpl

Fifth step:

1. 处理HTML

   html-webpack-plugin

2. 安装配置命令
   –save-dev -> -D
   安装在开发环境下
   –save -> -S
   安装在生产环境下

3. ES6开发项目所需安装的基本配置

npm i -D 
webpack webpack-cli webpack-dev-server 
babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy 
sass-loader node-sass css-loader style-loader 
ejs-loader html-webpack-plugin
 --registry=https://registry.npm.taobao.org

4. 安装好后在package.json中的安装项

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^5.0.0",
    "ejs-loader": "^0.5.0",
    "html-webpack-plugin": "^4.5.0",
    "jquery": "^3.5.1",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.3",
    "style-loader": "^2.0.0",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }