webpack
简介
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。在前端工程化中特别常用。
初始化项目
1、创建文件夹testProject，使用vscode打开该文件夹，打开终端，执行命令
npm init //得到package.json的一个文件
2.安装webpack
npm install webpack webpack-cli
3.构建测试项目代码
创建src文件夹，存放需要合并的js文件
util.js文件
exports.add = function (a, b) {
return a + b;
}
common.js文件
exports.info = function (str) {
//往浏览器输出
document.write(str);
}
src下创建main.js的入口文件
//将所有的js文件进行引入到一个文件中
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
4、在根目录下定义webpack.config.js文件配置打包的规则
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
//执行webpack时会找到这个文件，然后根据entry找到main.js从而将需要的文件进行打包
//合并完成后，写入到dist目录下的bundle.js文件
5.创建测试的test.html引用生成的bundle.js
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title></title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}
</style>
</head>
<body>
<script src="../dist/bundle.js"></script>
<script>
</script>
</body>
</html>
6.配置package.json，加入命令
"scripts": {
//...,
"dev": "webpack -w --mode=development"
}
7.运行命令，进行打包
npm run dev
8.打开test.html查看效果
补充
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
1、安装style-loader和 css-loader
//css-loader 是将 css 装载到 javascript
//style-loader 是让 javascript 认识css
//安装完后，就会在package.json中产生依赖
npm install --save-dev style-loader css-loader
2、修改webpack.config.js，配置CSS打包的规则
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{
//其他配置
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
这时候就可以把css也进行打包啦
