webpack入门,最好还是看官方文档 Getting Started,官方文档讲解的非常透彻。
唯一不好的地方就是阅读英文很别扭,影响阅读效率。
但是,还是建议阅读英文文档,边翻译边学习;
有些翻译会省略很多东西,比如MDN上的 JS Date.prototype.toLocaleString
安装webpack
mkdir webpack-demo
cd webpack-demo
yarn init -y
yarn add -D webpack webpack-cli
安装了 webpack 后,再安装 lodash
yarn add lodash
vscode 打开
code .
webpack.config.js
根目录下,新建 webpack.config.js
文件,编写如下内容
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development', // development, production
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
index.html
根目录下,新建 index.html
文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
src/index.js
根目录下,新建 src
目录,并在 src 目录下新建 index.js 文件,内容如下:
import _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
package.json 中添加 scripts
修改 package.json 文件,添加 scripts
"scripts": {
"build": "webpack"
},
yarn build
执行编译,然后双击 index.html
查看结果
修改 src/index.js
文件,element.innerHTML = _.join(['Hi', 'webpack'], ' ');
,编译 yarn build
,双击 index.html
再次查看结果。
一个最简单的webpack应用就是这样创建的!
End