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 |
资料: