共计 2984 个字符，预计需要花费 8 分钟才能阅读完成。
GitHub 完整配置文件地址：https://github.com/yhtx1997/webpack4-Instance
由于篇幅过长分三次发布，建议按顺序看 [webpack4] 配置属于自己的打包系统教程（一）—— 基础配置篇 [webpack4] 配置属于自己的打包系统教程（二）—— 资源配置篇 [webpack4] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇
基础配置篇
主要内容
安装 webpack4
目录初始化
配置初始化
入口及多入口配置
出口配置
安装 webpack4
安装 webpack 前请确保已安装 nodejs 和 npm
新建 npm 项目
npm init -y
这里的 init 表示初始化一个 npm 项目，-y 表示全部选 yes，不加的话会提示输入一些项目信息，比如项目名，版本号，作者 …
安装 webpack4
npm install webpack webpack-cli webpack-dev-server -D
这其实是一条合并的命令，拆开就是
npm install webpack -D
npm install webpack-cli -D
npm install webpack-dev-server -D
install 是安装的意思；-D 表示安装到本地开发环境，不使用全局安装是因为每个项目可能用的 webpack 版本不一样导致冲突
第一条安装的是 webpack 的核心文件，就好比是安装包
第二条是让 webpack 支持类似 npm run dev 这种命令行命令
第三条安装的是可以使 webpack 支持实时编译的拓展包
初始化 npm 配置及文件
现阶段的目标是让它能运行起来 现在目录下应该有一个文件夹，两个 .josn 文件
node_modules 用来存放所有安装的 npm 包
package.json 在这里配置 npm run 的脚本，以及包含项目信息，安装了哪些包
package-lock 详细的包的版本来源，确保项目所有开发人员用的都是一个版本
调整 package.json
官方推荐移除文件中的入口配置，这样可以防止意外发布你的代码。
“main”: “index.js”
并加上私有属性配置
“private”: true
运行 webpack 可以用在命令行输入 npx webpack 但是这样的运行方式在配置了开发环境和生产环境时，再运行需要写很多参数 所以添加一个 npm 脚本, 之后运行 输入 npm run test 即可，有参数后在后边追加即可
“test”: “webpack”
最后看起来像这样
新建入口文件及生成出口文件
在 webpack 4 中，可以无须任何配置使用，做完上边的操作后可以在命令行输入 npm run test 运行 webpack（这里的 test 是在上边 scripts 里自己定义的），但是会显示这样的结果。
这是因为入口文件不存在，webpack 默认是将当前目录下的 ./src/index.js 当做要打包的文件（入口），新建一下 src 目录和 index.js 文件，就可以正常了。
这时会生成一个 dist 目录以及目录里有一个 main.js，这是默认的打包好的文件及目录（出口），这样一个 webpack 算是初始化完成了。
注：
最终发布时如果只需要一个 js，那么开发时 index.js 里推荐是只用来引入其他 js 文件（import）。
在截止 2018 年 12 月 31 日 据我所知道的目前 import 和 export 还只是概念上的标准，js 还不能原生支持 import 和 export，大家能使用是因为配置了 babel，通过 babel 进行编译，使其变成 node.js 的代码，使其可以将这条命令视为加载模块。nodejs 采用 CommonJS 规范，关于 ES6 这方面的可以看 ES6 Module 的语法。
webpack4 入口出口配置
在上面也说了 webpack4 现在可以无需使用任何配置文件就可以使用，但是有些东西还是弄成自己喜欢的比较好
新建配置文件
在当前目录下新建一个 webpack.config.js 文件，并写入代码
const path = require(‘path’);//[1]
module.exports = {
//[2]
};
[1] 是引入 node 的 path 模块，这样就可以处理文件与目录的路径，处理路径是因为 windows 系列和 Linux 系列在路径的表示上不太一样。
[2] 是对外暴露大括号 {} 中的内容，用来写我们自定义的配置
注：关于配置文件名，wepack4 默认是会引入 ./webpack.config.js，如果想自己改名字的话可以在命令行输入一下代码，其中 webpack –config 是必须的，my.config.js 是自己自定义的配置文件的路径
webpack –config my.config.js
入口配置
为了能证明入口确实改了有效果，我将 ./src/index.js 的文件名改为 2048.js，并放到./src/js/2048.js；并修改代码
const path = require(‘path’);
module.exports = {
entry: “./src/2048.js”//add
};
在不加上面代码时会报之前的找不到入口的错误，加了以后会显示正常输出了，并且 ./dis 下会多一个 2048.js 的文件，
多入口配置
entry 不光能赋值绝对路径的字符串，还能赋值多个路径的数组或对象
entry: ‘./src/2048.js’// 单入口 字符串传参
entry: [‘./src/js/2048.js’,’./src/js/1024.js’,’./src/js/512.js’]// 多入口 数组传参
entry: {// 多入口 对象传参
2048: ‘./src/js/2048.js’,
1024: ‘./src/js/1024.js’,
512: ‘./src/js/512.js’
}
出口配置
出口跟入口不太一样，入口可以有很多，但是只有一个输出配置。
output: {
filename: ‘2048.js’,
path: ‘C:/Users/GengShaojing/Desktop/2048/dist’
}
filename 打包后文件的文件名。
path 打包后文件的的绝对路径。
多入口多输出文件
output: {
filename: ‘[name].js’,//[1]
path: path.resolve(__dirname, ‘dist’)//[2]
}
[1] [name] 表示使用 entry 传递过来的文件的文件名或者对象的 key 值
[2] __dirname 指向当前文件（webpack 配置文件）的绝对路径，path.resolve 是解析路径并在路径后加上 dist
每次修改后生成不一样的文件名
output: {
filename: “[name].[chunkhash].js”,
path: path.resolve(__dirname, ‘dist’)
}
filename 支持以下几个属性，且可以共存
[name] 模块名称 就是之前说的文件名或者对象的 key 值
[id] 模块标识符 应该是入口传入顺序的下标值从 0 开始
[hash] 模块标识符的哈希值 这个我理解的不太清楚，只知道他可以生成字符串
[chunkhash] 内容的哈希值 根据内容生成字符串
[contenthash] 提取的内容生成的哈希值 根据提取的内容生成字符串
注：官方推荐 [name] 加上 [chunkhash] 的模式
注：哈希值就是用算法提取的标识信息，相当于人和录入指纹，哈希值就是人录入指纹的机器，最后的字符串就是指纹
