070_Webpack
什么是Webpack
Webpack 是一个前端资源加载/打包工具。
它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
Webpack安装
全局安装
npm install -g webpack webpack-cli
或
cnpm install -g webpack webpack-cli
查看版本号
webpack -v
初始化项目
创建项目文件夹webpack
初始化项目
npm init -y
创建文件夹src
src下创建准备合并的js文件
common.js
exports.info = function (str) {
// 控制台输出
console.log(str);
// 浏览器输出
document.write(str);
}
utils.js
exports.add = function (a, b) {
return a + b;
}
src下创建入口文件main.js
const common = require('./common.js');
const utils = require('./utils.js');
common.info('Hello world!' + utils.add(100, 200));
js打包
配置文件webpack.config.js
// 导入path模块
const path = require("path"); //Node.js内置模块
// 定义js打包的规则
module.exports = {
// 入库函数从哪里开始进行编译打包
entry: './src/main.js', //配置入口文件
// 编译成功以后把内容输出到哪里去
output: {
// 输出指定目录
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前项目根目录
// 合并的js文件
filename: 'bundle.js' //输出文件
}
}
以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
执行打包命令或配置package.json执行打包命令
执行打包命令
webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩
package.json配置打包命令
"scripts": {
//...,
"dev": "webpack --mode=development"
}
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC"
}
运行npm命令执行打包
npm run dev
项目下创建index.html，引用bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
浏览器中查看index.html
css打包
安装style-loader和css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件
- css-loader 是将 css 装载到 javascript
- style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader
webpack.config.js添加打包规则
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{
//其他配置
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
// 导入path模块
const path = require("path"); //Node.js内置模块
// 定义js打包的规则
module.exports = {
// 入库函数从哪里开始进行编译打包
entry: './src/main.js', //配置入口文件
// 编译成功以后把内容输出到哪里去
output: {
// 输出指定目录
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前项目根目录
// 合并的js文件
filename: 'bundle.js' //输出文件
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
src下创建style.css
body{
background:pink;
}
main.js导入style.css
const common = require('./common.js');
const utils = require('./utils.js');
require('./style.css');
common.info('Hello world!' + utils.add(100, 200));
运行打包命令
npm run dev
