新建工程目录webpack-demo
mkdir webpack-demo && cd webpack-demo
npm init -y
cnpm install --save-dev webpack
cnpm install --save lodash # JavaScript 工具库，备用将要创建的最终工程目录如下：
webpack-demo
|- /dist
|- index.html
|- /node_modules
|- /src
|- index.js
|- package.json
|- webpack.config.js创建webpack.config.js文件，添加如下内容
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};创建src目录，在src目录下新建index.js如下：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());创建dist目录，在dist目录下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>在 package.json 添加一个 npm 脚本(npm script)：
{
...
"scripts": {
"build": "webpack"
},
...
}在webpack-demo目录下运行
npm run build会看到在dist目录下增加了一个bundle.js，这就是webpack输出的结果。最终工程目录如下：
|- /dist
|- bundle.js
|- index.html
|- /node_modules
|- /src
|- index.js
|- package.json
|- webpack.config.js在webpack-demo目录下运行
http-server浏览器访问http://localhost:8080/dist/，即可看到页面显示Hello webpack，如果没安装http-server，可以全局安装一个，安装命令如下
cnpm install http-server -g现在，你已经实现了一个基本的构建过程，你应该深入了解基本概念和配置来更好地解 webpack 的设计。
本例子源代码地址：https://github.com/wu-boy/webpack-demo，demo1目录。
参考资料：
1.webpack中文网站
2.Webpack2 完整踩坑教程
扫一扫
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
