从零搭建一个webpack项目
最近一直在学习webpack，在网上查阅一些案例的时候，其中不乏很多是基于webpack1.x的，也导致踩了不少的坑，所以决定以一个demo来总结最近学习webpack的收获。
本项目基于 webpack 4.16.1 、 webpack-cli 3.0.8
一个简单的demo
- 新建 demo 文件夹，在 demo 文件夹下打开cmd，依次输入
> npm init //初始化
> npm install webpack --save-dev // 安装 webpack
> npm install webpack-cli --save-dev // 安装 webpack-cli
-
同样的在 demo 文件夹下，完善如下图所示的项目结构：
项目结构.png - 在 package.json 下 script 中加入如下代码
"build": "webpack" // 这里也可以添加webpack参数
- 编写 webpack.config.js 文件，代码如下：
var path = require('path') // webpack 内置模块
module.exports = {
entry: './src/script/main.js', // 入口文件
output: { // 指定打包后输出文件的各项参数，详情可以参见官网API文档
path: path.join(__dirname, './dist/js'),
filename: '[name].js'
}
}
- 编写 index.html 和 main.js 文件，代码如下：
<!-- 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-demo</title>
</head>
<body>
<script src="./dist/js/main.js"></script>
</body>
</html>
// main.js
function hello () {
alert('webpack done!!!')
}
hello()
- 最后运行 npm run build 命令打包，可以发现在 dist/js 文件夹下多出了一个main.js，完成！
