前言
webapck的作用：
webpack是JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，会在内部生成一副依赖图，依赖图会映射项目所需的每个模块，并生成一个或多个bundle。
安装
本地安装
要安装最新的版本或者特定的版本请运行以下命令:
npm install webpack --save-dev
npm install webpack@<version> --save-dev
如果你使用的webapck版本是4+版本，你还需要安装CLI
npm install webpack-cli --save-dev
全局安装
npm install webpack --global
起步
初始化一个项目
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
构建目录结构
/dist ———— 打包之后的目录
--index.html
/node-modules
/src ———— 源目录
--index.js
package.json
webpack.config.js ——webpack配置
dist/index.html
<!doctype html>
<html>
<head>
<title>管理资源</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
src/index.js
import _ from 'lodash';
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
};
以上主要是配置了打包的入口和出口，用到的node的path包，对路径的转化做处理。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
对scripts加了个webpack的配置
loader配置
webpack有一个很强大的功能，就是可以通过不同的loader,处理各种类型的文件。包括xml、css、图片、字体等。以下用css、图片举例：
目录结构
/dist
--index.html
/node-modules
/src
--index.js
——icon.jpeg -- 图片
—— style.css -- css
package.json
webpack.config.js
安装对应的loader
npm install style-loader css-loader file-loader
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
以上rules是一个数组，所有的loader规则都是放在这个数组里面的。第一条css规则的意思是告诉webpack: hello，webpack,打包的时候遇到test这种类型的就用use里面的loader先转化。
src/style.css
.hello{
color: red;
background: url('./icon.jpeg');
}
src/index.js
...
import './style.css';
import Icon from './icon.jpeg';
function component() {
...
element.classList.add('hello');
// 将图像添加到我们已经存在的div中
let myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
...
}
...
这个时候你在控制台执行npm run build, 在dist里面会生成对应处理过的图片。浏览器打开dist/index.html。就可以看到对应的图片和字体颜色。
