webpack和npm常用命令
npm install webpack webpack-cli -g //全局安装webpack、 webpack-cli
npm init -y //初始化默认的package.json文件
npm install webpack --save-dev //下载webpack插件到node_modules 并在package.json文件中加上webpack的配置内容
npm install webpack-cli –save-dev //局部安装webpack-cli
npm install {whatever}-loader --save-dev //安装loader并将该loader配置到package.json文件中
npm install webpack-dev-server –g //全局安装webpack-dev-server
npm install webpack-dev-server --save-dev //局部安装webpack-dev-server
webpack //对项目进行打包
webpack --watch // 自动监控文件的改变---
webpack --mode production // 设置生产模式
webpack --progress // 显示进度条
webpack --colors // 添加颜色
webpack --display-modules // 打包时显示隐藏的模块
webpack --display-chunks // 打包时显示chunks
webpack --display-error-details //显示详细错误信息
常用loader的安装：
处理文件：url-loader、file-loader 将文件发送到输出文件夹
npm install url-loader file-loader –-save-dev
转换编译：babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install babel-loader@7.1.2 babel-core babel-preset-env --save-dev
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
1、babel-core //必备的核心库
2、babel-loader //webpack loader配置必备
3、babel-preset-env //有了它，你不再需要添加2015、2016、2017，全都支持
4、babel-preset-stage-0 //有了它，你不再需要添加stage-1,stage-2,stage-3,默认向后支持
5、babel-plugin-transform-runtime
6、babel-runtime //5和6是一起使用的，支持polyfill，regenerator配置
样式：
style-loader 将模块的导出作为样式添加到 DOM 中
npm install style-loader --save-dev
css-loader: 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
npm install css-loader --save-dev
less-loader: 加载和转译 LESS 文件
npm install less less-loader --save-dev
sass-loader: 加载和转译 SASS/SCSS 文件
npm install sass-loader node-sass --save-dev
postcss-loader: 使用 PostCSS 加载和转译 CSS/SSS 文件
npm install postcss-loader –D
测试
eslint-loader
npm install eslint eslint-loader --save-dev
常用插件的安装
HtmlWebpackPlugin: 简单创建 HTML 文件，用于服务器访问
npm install html-webpack-plugin --save-dev
CleanWebpackPluign 清除文件
npm install clean-webpack-plugin --save-dev
MiniCssExtractPlugin 分离CSS、单独打包CSS
npm install mini-css-extract-plugin --save-dev
PurifyCSS插件：从CSS中删除未使用的选择器（清除冗余代码）
npm i -D purifycss-webpack purify-css
OptimizeCssAssetsWebpackPlugin: 压缩、优化CSS
npm install --save-dev optimize-css-assets-webpack-plugin
UglifyjsWebpackPlugin: 压缩JS
npm install --save-dev uglifyjs-webpack-plugin
编译相关loader的安装
url-loader、file-loader 将文件发送到输出文件夹
npm install url-loader file-loader –-save-dev
babel-loader加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install babel-loader@7.1.2 babel-core babel-preset-env –-save-dev
样式相关loader的安装
style-loader 将模块的导出作为样式添加到 DOM 中
npm install style-loader --save-dev
css-loader: 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
npm install css-loader --save-dev
less-loader: 加载和转译 LESS 文件
npm install less less-loader --save-dev
sass-loader: 加载和转译 SASS/SCSS 文件
npm install sass-loader node-sass --save-dev
postcss-loader: 使用 PostCSS 加载和转译 CSS/SSS 文件
npm install postcss-loader –D
