1、webpack安装
1.1、安装最新NodeJS
1.2、创建webpack-demo目录(cmd操作)
mkdir webpack-demo
cd webpack-demo
1.3、初始化 package.json
npm init -y
1.4、安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
2、创建一个bundle文件
2.1、创建src文件夹,以及src/index.js,引入lodash
mkdir src
cd src
type NUL > index.js
import _ from 'lodash'
function component(){
var element = document.createElement('div');
element.innerHTML = _.join(['hello', 'webpack'], '');
return element;
}
document.body.appendChild(component());
npm install --save lodash
2.2、创建dist文件夹,以及dist/index.html
mkdir dist
cd dist
type NUL > index.html
import _ from 'lodash'
function component(){
var element = document.createElement('div');
element.innerHTML = _.join(['hello', 'webpack'], '');
return element;
}
document.body.appendChild(component());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
3、输出main.js,webpack-demo下执行
npx webpack
dist文件夹下生成一个 main.js
4、访问dist/index.html
模块
大多数项目需要复杂的配置,webpack支持配置文件,可以创建一个取代以上使用CLI选项方式的配置文件
在webpack-demo目录下创建webpack.config.js,具体配置如下:
-
指定loader规则(loader rules)
-
插件 plugins
-
解析选项 resolve options等
const path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname, 'dist') //__dirname 双下划线
}
}
通过webpack.config,js再次执行构建
npx webpack --config webpack.config.js
在 index.html 引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
npm 脚本
CLI运行本地webpack不是很方便,可以设置快捷方式,在 package.json中添加一个 npm脚本
"build" : "webpack"
{
"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.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
接下来可以使用 npm run build 命令 替代 npx 命令
以上就是基本webpack构建过程
文件夹目录如下
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules