序章
- 创建一个空目录,作为本次尝试的demo
- 首先需要安装webpack以及webpack-cli,这里推荐全局安装,否则会有各种奇怪的问题,十分奇葩。
首先要全局安装这两个东西:
npm install webpack -g
npm install webpack-cli -g
其次还有在当前目录下局部安装(不是很懂,但是需要,否则后面npm启动时会很麻烦):
npm install webpack --save-dev
npm install webpack-cli --save-dev
- 在当前目录下使用
npm init
命令,会看到生成一个package.json
文件,以及依赖包node_modules
目录。 - 在当前目录下搭建结构:
(1)创建一个app目录,作为开发源码的存放地。
(2)创建一个public目录,作为打包后的输出地。 - 在punlic下创建一个
index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack demo</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
- 在app目录下创建
main.js
作为入口文件,然后可以再创建一个用来输出一些东西的greet.js文件(作为是否打包成功的效果查看)。
(1)main:
const greeter = require('./Greeter')// 这里主要是引入输出的js
document.querySelector('#root').appendChild(greeter())
(2)Greeter:
// 打印一个hello world
module.exports = function () {
var greet = document.createElement('div')
greet.textContent = 'Hello World'
return greet
}
- 最后在根目录下创建一个
webpack.config.js
用来配置webpack即可:
// 其中__dirname是node环境下的变量,指向的是命令运行的目录
// 其中entry即指向的需要打包的入口文件
// output即是打包后的输出文件,可以顾名思义
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
-
到这里基本上简易配置就完成了,直接在根目录下运行
webpack
即可看到打包完成,并输出到public目录下的一个bundle.js
的文件中。
-
当然,这样有些不方便,可以在最开始init出来的
package.json
中的script
下配置npm运行方式:"start": "webpack"
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack": "^4.43.0"
},
"devDependencies": {
"webpack-cli": "^3.3.11"
},
"scripts": {
"start": "webpack"
},
"author": "",
"license": "ISC"
}
这样就可以直接执行npm start
来直接打包了。