【webpack基础】Webpack 常用命令总结

webpack 常用命令

命令	描述
npm install webpack webpack-cli -g	全局安装webpack、
npm init -y	初始化默认的package.json文件
npm install webpack --save-dev	下载webpack插件到node_modules 并在package.json文件中加上webpack的配置内容
npm install webpack-cli –save-dev	局部安装webpack-cli
webpack	对项目进行打包
webpack --watch	自动监控文件的改变
webpack --mode production	设置生产模式
webpack --progress	显示进度条
webpack --colors	添加颜色
webpack --display-modules	打包时显示隐藏的模块
webpack --display-chunks	打包时显示chunks
webpack --display-error-details	显示详细错误信息
npm install webpack-dev-server –g	全局安装webpack-dev-server
npm install webpack-dev-server --save-dev	局部安装

编译相关loader的安装

命令	描述
npm install url-loader file-loader –-save-dev	url-loader、file-loader 将文件发送到输出文件夹
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-loader加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

样式相关loader的安装

命令	描述
npm install style-loader --save-dev	style-loader 将模块的导出作为样式添加到 DOM 中
npm install css-loader --save-dev	css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
npm install less less-loader --save-dev	less-loader 加载和转译 LESS 文件
npm install sass-loader node-sass --save-dev	sass-loader 加载和转译 SASS/SCSS 文件
npm install postcss-loader –D	postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件

常用Plugin的安装

命令	描述
npm install html-webpack-plugin --save-dev	HtmlWebpackPlugin 简单创建 HTML 文件，用于服务器访问
npm install clean-webpack-plugin --save-dev	CleanWebpackPluign 清除文件
npm install mini-css-extract-plugin --save-dev	MiniCssExtractPlugin 分离CSS、单独打包CSS
npm i -D purifycss-webpack purify-css	PurifyCSS插件 从CSS中删除未使用的选择器（清除冗余代码）
npm install --save-dev optimize-css-assets-webpack-plugin	OptimizeCssAssetsWebpackPlugin 压缩、优化CSS
npm install --save-dev uglifyjs-webpack-plugin	UglifyjsWebpackPlugin 压缩JS

资料：

Webpack 常用命令总结.docx