上一篇文章简单介绍了一些webpack的概念，让大家对webpack有一个初步的认识。接下来我们一起来做一个实例，让大家体验一下。
1. 基本安装
创建一个目录webpack-demo ，初始化 npm，以及在本地安装 webpack .
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
创建以下目录结构和内容
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
+ |- webpack.config.js
+ |- /src
+ |- index.js
//src/index.js
import _ from 'lodash';//引入lodash包
function component() {
var element = document.createElement('div');
// 这里使用Lodash的jion函数做字符串连接
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
//index.html
<html>
<head>
<title>Wepack Demo Hello</title>
</head>
<body>
</body>
</html>
<script src="./bundle.js"></script>
//webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library。
npm install --save lodash
如图1，如果出现错误提示【Import declaration are not supported by current Javascript version】。
1.jpg
[解决方案]：不要紧张，这个问题不是webpack的问题，而是你用了ES6的语法，或者你也跟我一样使用的是webstorm2017，它默认的javascript的5.1，你需要手动去把它设置成ES6,解决办法【setting>Language & Frameworks>javascript】如图2。
2.jpg
2. 执行构建
现在，让我们尝试执行构建
Hash: e3c728dc0b00da586b7c
Version: webpack 3.4.1
Time: 843ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./src/index.js 271 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
3.NPM 脚本
通常，我们可以在package.json里边配置script，然后通过npm调用webpack执行构建
//package.json
{
...
"scripts": {
"build": "webpack"
},
...
}
npm run build
这时候我们就可以在打开浏览器中，看一下编译之后的结果
image.png
学习源码 webpack-demo
网友评论