webpack
2021-11-05 14:13:01 4 举报AI智能生成
简单学习webpack用法
作者其他创作
大纲/内容
介绍
静态模块打包工具
模块化
打包
安装
安装到目录
# npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies
# 安装最新稳定版
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新体验版本
npm i -D webpack@beta
# 安装最新稳定版
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新体验版本
npm i -D webpack@beta
安装到全局
npm i -g webpack
额外安装
npm i -g webpack-cli
webpack -v
显示webpack-cli 和 显示webpack版本就ok了
从 Webpack2 开始，已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。
使用
Loader
Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，
告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。
告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。
处理css
安装：npm i -D style-loader css-loader
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /\.css$/,
use: ['style-loader', 'css-loader?minimize'],
}
]
}
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /\.css$/,
use: ['style-loader', 'css-loader?minimize'],
}
]
}
如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。
在配置 Loader 时需要注意的是：
use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；
每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
在配置 Loader 时需要注意的是：
use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；
每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
Plugin
Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。
http://webpack.wuhaolin.cn/1%E5%85%A5%E9%97%A8/1-5%E4%BD%BF%E7%94%A8Plugin.html
DevServer
安装：npm i -D webpack-dev-server
0 条评论
下一页
为你推荐
查看更多
