基于Webpack4.x + npm6.5 + node v10.10.0 + vscode环境.
项目名webpackDemo
开始步骤:找个路径新建个文件夹命名为webpackDemo,记得千万不要命名为webpack,因为这会和包冲突。
打开终端.或使用vscode打开webpackDemo 文件夹。新建一个终端.
1. cd 到 webpackDemo.
2. npm init -y 执行完成后会自动生成package.json的文件。
3. npm install -D webpack webpack-cli // 安装到开发依赖
安装完成后查看package.json
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
4. 在vscode 中 新建src文件夹。新建一个dist文件夹,在dist文件夹下新建一个index.html.在src 中建一个index.js文件。
在package.json的同级目录下建一个webpack.config.js。
5。最后目录如下:
6.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>webpack learn</title>
</head>
<body>
<script src='./bundle.js'></script>
</body>
</html>
这里其实是个普通的html啦,只不过是引用了最后打包出来的bundle.js
<script src='./bundle.js'></script>
7.index.js
function welcome_webpack() {
return 'webpack hello world!';
}
const ret = welcome_webpack();
console.log(ret);
8. 先执行一个 node ./src/index.js
AdeMacBook-Pro-3:webpackdemo a$ npm start
> webpackdemo@1.0.0 start /Users/a/Documents/reactNative/reactstudy/webpackdemo
> node ./src/index.js
webpack hello world!
控制台输出webpack hello world! 说明js没有问题。
9.进行webpack.config.js的编写了,参考中文官方API:https://www.webpackjs.com
因为只有一个index.js进行打包。所以只需要写入口点文件和输出的打包文件就可以。
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
其中entry 为入口文件,如果有多个入口文件,参考API说明。
output为输出的最终打包文件,不管有多少个入口文件,输出的只有一个。并指定输也目录为dist。
10. 修改pageage.json中的script,因为这是最终npm 打包,运行,测试使用的脚本。
...
"scripts": {
"start": "node ./src/index.js",
"dev": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
11.然后在vscode的终端中执行npm run dev
AdeMacBook-Pro-3:webpackdemo a$ npm run dev
> webpackdemo@1.0.0 dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack
Hash: 987cca24b2115d4658eb
Version: webpack 4.29.6
Time: 85ms
Built at: 2019-03-01 23:10:34
Asset Size Chunks Chunk Names
bundle.js 3.89 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.js] 118 bytes {main} [built]
12.这时可以看到在dist目录下输出了一个bundle.js这个打包后的文件。这个文件正好是webpack.config.js中的output对象里指定的filename。然后打开这个dist 的目录下,使用chorme 打开html。然后按comman+option+i(这个是mac 下的快捷键)打开开发者开具。可以看到console里输出了。
OK。第一个最为基础的打包完成。