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

目录

webpack 常用命令编译相关loader的安装样式相关loader的安装常用Plugin的安装

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-cliwebpack对项目进行打包webpack --watch自动监控文件的改变webpack --mode production设置生产模式webpack --progress显示进度条webpack --colors添加颜色webpack --display-modules打包时显示隐藏的模块webpack --display-chunks打包时显示chunkswebpack --display-error-details显示详细错误信息npm install webpack-dev-server –g全局安装webpack-dev-servernpm install webpack-dev-server --save-dev局部安装

编译相关loader的安装

命令描述npm install url-loader file-loader –-save-devurl-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-devbabel-loader加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

样式相关loader的安装

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

常用Plugin的安装

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

资料：

Webpack 常用命令总结.docx

相关文章