一、初始化
- 创建文件夹
- npm init -y
二、安装webpack 以及webpack-cli
- yarn add webpack webpack-cli@3.3.10 -D
- 注意版本更新各版本不兼容
三、创建config文件夹做开发环境和生产环境的配置
- base.config.js
- dev.config.js
- pro.config.js
四、创建src目录以及public目录
五、webpack基本配置项
- entry
- output
- resolve
- plugins
- module
六、plugins常用的插件
- html-webpack-plugin
- clean-webpack-plugin
- copy-webpack-plugin
- extract-text-webpack-plugin
yarn add html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D
七、常用的loader
处理JS的loader
- babel-loader
- @babel/core
- @babel/preset-env
yarn add babel-loader @babel/core @babel/preset-env -D
处理图片的loader
- url-loader
- file-loader
yarn add url-loader file-loader -D
处理cssloader
- style-loader
- css-loader
- sass-loader
- node-sass
- postcss-loader
- autoprefixer
yarn add style-loader css-loader sass-loader postcss-loader autoprefixer -D
处理vue单文件组件
- vue-loader
- vue-template-compiler
yarn add vue-loader vue-template-compiler -D
八、合并webpack配置项
yarn add webpack-merge -D
九、webpack服务
yarn add webpack-dev-server -D
