1. webpack初始用
1. 首先，确保webpack已经安装好了，运行
webpack -v命令
PS E:\good good study\webpack-study> webpack -v
4.39.2
2. 然后，新建一个项目目录，格式如下：
image.png
3. 接着，在
dist目录下的index.html中以及src目录下的main.js文件中写几行代码
index.html文件：
***dist目录下的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>Document</title>
</head>
<body>
<div id="demo"></div>
<script src="bundle.js"></script>
</body>
</html>
main.js文件：
****src目录下的main.js文件******
var oDiv = document.querySelector('#demo');
oDiv.innerHTML = 'hello world';
4. 此时，打开
index.html页面会报错，bundle.js文件找不到，因为压根就没有，我们需要运行webpack命令，将main.js文件打包到bundle.js文件中
PS E:\good good study\webpackStudy> webpack src/main.js --output dist/bundle.js
Hash: a5f60972961d2d88713e
Version: webpack 4.39.2
Time: 446ms
Built at: 2019-08-17 11:13:22 AM
Asset Size Chunks Chunk Names
bundle.js 985 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/main.js 76 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
5. 这时，打开
dist文件夹，会发现多了一个bundle.js文件，此时打开index.html文件就会出现hello world了。
image.png
image.png
2. webpack.config.js文件
上面，我们的算是初步使用了一下webpack，但是，最后运行的命令让我很不爽，
webpack src/main.js --output dist/bundle.js，这么一大长串的命令很容易就写错了，有没有简单的方法呢？
既然，我们都感觉到了，作为一个非常牛逼的webpack，当然也考虑到了，这时我们就需要用到webpack.config.js来解决我们的问题了。
1. 首先，在根目录下创建一个
webpack.config.js文件，如下：
image.png
2.
webpack.config.js文件当中的格式是什么，以及它里面有什么东西呢？ 注意：webpack.config.js文件遵循commonjs规范，就是可以通过module.exports来导出东西，配置文件中的内容主要包括五个部分，就是我们前面提到过的webpack的五个组成部分，有entry、output、module、plugins、devServer等组成
module.exports = {
entry: {//入口配置
},
output: {//出口配置
},
module: {//转化器配置
},
plugins: [//插件
],
devServer: {//开发服务器
}
}
这里，我们只需要定义入口和出口就可以了，别的功能先不处理
module.exports = {
entry: {//入口配置
a: './src/main.js'
},
output: {//出口配置
filename: './dist/bundle.js'
}
}
注意：路径中的
./不能省略，否则会找不到文件，还有就是filename是固定写法
3. 然后，我们就可以在命令行输入
webpack，来打包我们的文件了
PS E:\good good study\webpackStudy> webpack
Hash: 3b6dd5ddf56c329dd854
Version: webpack 4.39.2
Time: 158ms
Built at: 2019-08-17 11:52:46 AM
Asset Size Chunks Chunk Names
./dist/bundle.js 985 bytes 0 [emitted] a
Entrypoint a = ./dist/bundle.js
[0] ./src/main.js 76 bytes {0} [built]
我们看一下，
dist文件夹中多了一个dist文件夹，what the fuck！！ 这是啥？ 注意：我们的filename中定义的路径会被解析成文件所在的路径，./dist/bundle.js会被解析成dist文件夹中的bundle.js
image.png
如果我们不写dist路径呢，webpack.config.js改写如下：
module.exports = {
entry: {//入口配置
a: './src/main.js'
},
output: {//出口配置
filename: 'bundle.js'
}
}
image.png
发现，不写前面的./dist是可以的，但是为了程序的健壮性，我们一般在设置一个默认路径，像这样：
方式一：
module.exports = {
entry: {//入口配置
a: './src/main.js'
},
output: {//出口配置
path: __dirname + '/dist',
filename: 'bundle.js'
}
}
方式二：
const path = require('path');
module.exports = {
entry: {//入口配置
a: './src/main.js'
},
output: {//出口配置
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
注意：这两种方式都可以，但是，注意一点，path属性当中的路径，必须是绝对路径，不能是相对路径。
还有一个问题，就是文件名一定要叫
webpack.config.js吗？ 其实，并不是，我们可以随便起名字，例如，我就叫jason.config.js，接下来注意了，我们在打包运行的时候，要这样写才能正常打包，webpack --config jason.config.js，这。。。，是不是最近伙食太好，吃撑了，所以我们一般不会修改webpack.config.js文件的名字。
在实际的开发中，总是看见有人这么用，
npm run build、npm run dev，这又是个啥？ 这是在package.json文件中的script属性当中配置好了，才可以这样使用，其实，还是调用命令行webpack
********package.json文件*********
{
"name": "webpackStudy",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //配置
},
"keywords": [],
"author": "",
"license": "ISC"
}
这样我们在命令中输入，npm run build就可以了，原理还是调用webpack进行打包。
PS E:\good good study\webpackStudy> npm run build
> webpackStudy@1.0.0 build E:\good good study\webpackStudy
> webpack
Hash: 3b6dd5ddf56c329dd854
Version: webpack 4.39.2
Time: 451ms
Built at: 2019-08-17 3:43:04 PM
Asset Size Chunks Chunk Names
bundle.js 985 bytes 0 [emitted] a
Entrypoint a = bundle.js
[0] ./src/main.js 76 bytes {0} [built]
3. 命令行运行成功之后的warning警告
我们发现，命令行中运行成功之后都会返回一个警告，例如：
PS E:\good good study\webpackStudy> npm run build
> webpackStudy@1.0.0 build E:\good good study\webpackStudy
> webpack
Hash: 3b6dd5ddf56c329dd854
Version: webpack 4.39.2
Time: 143ms
Built at: 2019-08-17 3:58:08 PM
Asset Size Chunks Chunk Names
bundle.js 985 bytes 0 [emitted] a
Entrypoint a = bundle.js
[0] ./src/main.js 76 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
这个警告是个啥？ 这里的警告就是要我们指定一种开发的环境，是
development，还是production；我们要消除警告也很简单，只需这样运行打包即可，webpack --mode development、webpack --mode production
PS E:\good good study\webpackStudy> webpack --mode production
Hash: 76379c02b71d3fe11f0a
Version: webpack 4.39.2
Time: 137ms
Built at: 2019-08-17 4:01:09 PM
Asset Size Chunks Chunk Names
bundle.js 985 bytes 0 [emitted] a
Entrypoint a = bundle.js
[0] ./src/main.js 76 bytes {0} [built]
至此，世界又变美好了😘
网友评论