webpack常用命令
全局安装webpack
shell
# 全局安装webpack
npm install webpack webpack-cli -g
npm i webpack-dev-server -g
局部安装webpack
下载webpack插件到node_modules，并在package.json文件中加上。
shell
# 初始化package.json
npm init -y
# 安装webpack. -D / --save-dev
npm i webpack webpack-cli -D
# 安装webpack-dev-server
npm i webpack-dev-server --save-dev
package.json脚本命令
webpack：对项目进行打包webpack --watch：自动监控文件的改变webpack --mode production：设置为生产模式webpack --progress：显示进度条webpack --colors：设置为彩色显示webpack --display-modules：打包时显示隐藏的模块webpack --display-chunks：打包时显示chunkswebpack --display-error-details：显示详情错误信息
常用的loader安装
文件相关
url-loader、file-loader将文件发送到输出文件夹
shell
npm i url-loader file-loader -D
babel-loader
转换编译：babel-loader加载ES2015+代码，然后使用Babel转译为ES5
shell
npm i babel-loader @babel/core @babel/preset-env -D
# or
npm i babel-loader@7.1.2 babel-core babel-preset-env -D
babel-core是babel的核心，若是想要用babel-loader把ES6的代码转换成为ES5的代码，那么你就需要对应版本的babel-core。
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x
babel-core：必备的核心库babel-preset-env：有了它，你不再需要添加2015、2016、2017，全部都支持babel-preset-stage-0：有了它，你不再需要添加stage-1、stage-2、stage-3，默认向后支持babel-plugin-transform-runtime、babel-runtime：支持polyfill，regenerator配置
样式相关
style-loader：将模块的导出作为样式添加到HTML中
shell
npm i style-loader -D
css-loader：解析css文件后，使用import加载，并返回css代码
shell
npm i css-loader -D
postcss-loader：使用PostCSS加载和编译css文件（添加厂商前缀）
shell
npm i postcss-loader -D
less-loader：加载和转译less文件
shell
npm i less less-loader -D
sass-loader：加载和转译scss/sass文件
shell
npm i sass-loader node-sass -D
常用的plugin
html-webpack-plugin
简单创建HTML文件，用于服务器访问
shell
npm i html-webpack-plugin -D
clean-webpack-plugin
清除文件
shell
npm i clean-webpack-plugin -D
mini-css-extract-plugin
分离css、单独打包css
shell
npm i mini-css-extract-plugin -D
purify-css
从CSS中删除未使用的选择器（清除冗余代码）
shell
npm i purifycss-webpack purify-css -D
optimize-css-assets-webpack-plugin
压缩、优化CSS
shell
npm i optimize-css-assets-webpack-plugin -D
uglifyjs-webpack-plugin
压缩、混淆JS
shell
npm i uglifyjs-webpack-plugin -D