- 简介
- Webpack是一个其那段资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
- 作用
- 可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求
-
使用方式
-
全局安装Webpack（尽量在项目目录中执行cmd命令）```cmd
npm install -g webpack webpack-cli - 在项目目录的js目录中创建几个js文件（之间的关联任意）。例如common.js、index.js、about.js、main.js(入口js文件)等等
-
打包（只打包js文件）
-
在项目根目录中创建配置文件webpack.config.js（文件名最好固定，内容结构固定）```javascript
// Node.js内置模块
const path = require("path");
module.exports = {
// 配置入口文件
entry: "./src/assets/js/main.js",
output: {
// 输出路径，dirname：当前文件所在路径，最好事先创建好
path: path.resolve(dirname, "./dist"),
// 输出文件
filename: "bundle.js"
}
} -
命令行执行编译命令
-
cmd窗口执行```cmd
webpack # 这个会有警告信息
或者
webpack --mode=development # 这个没有警告信息```
-
- 完成js文件的打包
-
- 同样在项目目录的css目录中创建几个css文件，然后在main.js(入口js文件)引入css文件
-
安装css加载工具```cmd
npm install --save-dev style-loader css-loader -
上面的webpack.config.js配置文件中添加内容（和output键同级）```javascript
module: {
rules: [
{
// 打包规则应用到以css结尾的文件上
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
} - 打包执行同样的命令即可
-
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。客服邮箱:kefu@itcaiji.cn
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
