- 第一步：创建项目结构
首先我们创建两个目录并创建两个index的文件
mkdir demo
mkdir src
项目结构
webpack4
+ |- package.json
+ |- /demo
+ |- index.html
+ |- /src
+ |- index.js #入口文件
- 第二步：安装 loadash 依赖和编写 js 文件 (生产环境需要的依赖)
npm install --save lodash #或者 npm i lodash -P
F:\git\webpack4\src>npm i lodash -P
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ lodash@4.17.11
added 1 package in 7.46s
image.png
编写：src/index.js 文件
import _ from 'lodash';
function createDomElement() {
var dom = document.createElement('div');
dom.innerHTML = _.join(['aicoder', '.com', ' wow'], '');
return dom;
}
document.body.appendChild(createDomElement());
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>起步</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
- 第三步：编写 webpack 配置文件
根目录下添加 webpack.config.js文件。
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js 内容如下：
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
}
};
- 执行构建任务
直接执行构建任务：
npx webpack
F:\git\webpack4>npx webpack
npx: installed 1 in 10.719s
Path must be a string. Received undefined
F:\git\webpack4\node_modules\webpack\bin\webpack.js
Hash: 98c8a3b616aa10e0eecb
Version: webpack 4.35.0
Time: 395ms
Built at: 2019-06-25 20:43:35
Asset Size Chunks Chunk Names
main.js 551 KiB main [emitted] main
Entrypoint main = main.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/index.js] 289 bytes {main} [built]
+ 1 hidden module
打开： dist/index.html 可以查看到页面的结果。
网友评论