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 |
资料:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfhaif
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13