webpack入门一 使用webpack打包
用于编译javascript模块的工具，命令知道会用就行。
官方文档 https://webpack.js.org/guides/getting-started/
入门体验
// 创建一个demo文件夹
mkdir webpack-demo
// 进入文件夹
cd webpack-demo
// 安装webpack依赖
npm init -y
npm install webpack webpack-cli --save-dev
在webpack-demo文件夹下创建如下文件
webpack-demo
|- package.json // 自动创建的
+ |- index.html
+ |- /src
+ |- index.js
src下新建index.js文件
import _ from 'lodash';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
安装lodash
npm install --save lodash
运行npx webpack
它将脚本src/index.js作为入口点，
并将生成dist/main.js作为输出。
npxNode 8.2 / npm 5.2.0或更高版本附带的命令运行./node_modules/.bin/webpack我们在一开始安装的webpack软件包的webpack二进制文件
然后再创建dist/index.html,引入打包好的main.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试webpack</title>
</head>
<body>
</body>
<script src="main.js"></script>
</html>
使用配置文件
webpack-demo
|- package.json
+ |- webpack.config.js
加入内容
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
再次使用新的配置文件，重新构建
npx webpack --config webpack.config.js
把上述命令集成
修改package.json添加build自定义命令
// script里面添加
"build": "webpack --config webpack.config.js"
然后就可以使用熟悉的命令打包了
npm run build
总结
一个最基础的打包命令雏形就出来了，后面继续学习webpack在vue中的用法