1 概述
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
2 webpack安装
# 全局安装webpack
npm install -g webpack webpack-cli
# 查看版本确认是否安装成功
webpack -v
3 js文件打包与css文件打包
3.1 项目初始化
- 在当前目录下初始化，执行命令
npm init -y
- 创建src源文件夹，用于存放需要整合的js和css文件
- 创建common.js文件
exports.info = function(data){
document.write(data);
}
- 创建utils.js文件
exports.sum = function(num1,num2){
return parseInt(num1) + parseInt(num2);
}
- 创建style.css文件
body {
background-color: aqua;
}
- 创建main.js文件，用于整合之前的文件
//引入js模块
const common = require("./common.js");
const utils = require("./utils.js");
//引入css模块
require("./style.css");
//调用方法
common.info("Hello webpack " + utils.sum(2,3));
3.2 安装style-loader和 css-loader 用于css打包
npm install --save-dev style-loader css-loader
3.3 js与css文件打包的配置文件
在webpack的目录下创建配置文件 webpack.config.js，配置如下内容：
const path = require("path");
module.exports = {
entry: "./src/main.js", //配置入口文件
output: {
path: path.resolve(__dirname,"./dist"), //输出路径,__dirname为当前文件所在路径
filename: "bundle.js" //输出文件
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ["style-loader","css-loader"]
}
]
}
}
3.4 执行命令编译文件
# 代码会被压缩的生产模式
# webpack
# 代码不会压缩的开发模式
webpack --mode=development
3.5 测试
在webpack的目录下创建 index.html，引用生成的bundle.js文件
<body>
<script src="dist/bundle.js"></script>
</body>
至此，可以成功看到输出内容以及样式效果。证明打包成功。
3.6 目录结构
image-20200827165653544.png
网友评论