从零配置你的Webpack
前言
上篇文章简单的介绍了一下，前端进阶之脚手架的搭建。其实我个人认为重要的还是Webpack的配置出来的template，至于脚手架的交互体验可以后期去优化，也可以更加的个性化。但是我们的核心还是放在Webpack等一系列的配置上。
这篇文章的目的
- 可以给自己一个回顾的地方
- 加强对Webpack的理解，每个知识点都会认认真真的彻查！尽量让每一步都是非常清晰明了的！
- 如果可以帮助到大家那是更好不过了
好了，收！话不多说开始！
前提
相信来到这里的小伙伴，都是有一些些前端的经验了，至于什么node安装环境变量这里就不赘述了。本人使用的是mac os，如果是Windows的并且碰到问题的话，可以留言，或者直接Google。
开始
建立一个空的文件夹📁
新建一个文件夹，名为【webpackInit】
并且使用你的编辑器打开他，然后打开命令行执行：
npm init -y
这个命令是node帮你初始化一个项目用的，帮你新建一个package.json。
至于-y是用于默认都以yes继续执行。如果想了解一下里面到底有什么的同学可以不用*-y*继续跑一遍。其实里面的东西后期都可以自己修改package.json。所以不需要太在意。
安装Webpack🔧
现在是北京时间：2020/06/07 06:42:49。
Webpack5有Beta版，这里就不考虑了，后续上正式版的话我应该会出新的文章介绍。
因为我们使用的是 webpack 4+ 版本，还需要安装 webpack-cli ，执行以下命令：
npm install --save-dev webpack webpack-cli
因为Webpack主要是编译时使用所以放到“devDependencies”。
确认一下现在的目录结构，以防有同学掉队！
webpackInit
|- node_modules
|- package-lock.json
|- package.json
这里说下题外话。
package.json和package-lock.json的区别
package.json 文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，npm install 都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以 package-lock.json 文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。
那如果我们安装时的包有bug，后面需要更新怎么办？
在以前可能就是直接改 package.json 里面的版本，然后再 npm install 了，但是 5 版本后就不支持这样做了，因为版本已经锁定在 package-lock.json 里了，所以我们只能 npm install xxx@x.x.x 这样去更新我们的依赖，然后 package-lock.json 也能随之更新。
新建配置文件📃
我们在根目录新建文件夹【config】用于存储一些相关的配置文件，然后在【config】里面新建一个文件夹【webpack】表示，专门用于存储webpack的配置文件。然后在【webpack】这个文件夹下面新建文件【webpack.common.config.js】
并敲入以下代码
const path = require('path');
module.exports = {
// 配置入口文件
entry: {
app: './src/index.js',
},
// 打包📦之后的出口
output: {
// 如果不加哈希值，浏览器会有缓存，可能你部署了，但是用户看到的还是老页面
// 8是hash的长度，如果不设置，webpack会设置默认值为20。
filename: 'js/[name].[chunkhash:8].bundle.js',
/**
* Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，
* 所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。
* path.resolve
* 1.path.resolve()方法可以将路径或者路径片段解析成绝对路径
* 2.传入路径从右至左解析，遇到第一个绝对路径是完成解析，例如path.resolve('/foo', '/bar', 'baz') 将返回 /bar/baz
* 3.如果传入的绝对路径不存在，那么当前目录将被使用
* 4.当传入的参数没有/时，将被传入解析到当前根目录
* 5.零长度的路径将被忽略
* 6.如果没有传入参数，将返回当前根目录
*
* _dirname表示绝对路径
* 我们碰到的./xx就是相对路径
* 1.只传入__dirname也可以自动调用path.resolve方法
* 2.可以拼接路径字符串，但是不调用path.resolve()方法拼接失败
* 3.__dirname代表的是当前文件（a.js）的绝对路径
* 4.从右至左解析，遇到了绝对路径/src，因此直接返
*/
path: path.resolve(__dirname, '../../dist')
}
}
webpack 配置是标准的 Node.js的CommonJS 模块，它通过require来引入其他模块，通过module.exports导出模块，由 webpack 根据对象定义的属性进行解析。
在根目录新建【src】文件夹📁
在【src】文件夹下新建文件index.js
ok👌，确认一下目录结构
webpackInit
+ |- config
+ |- webpack
+ |- webpack.common.config.js
|- node_modules
+ |- src
+ |- index.js
|- package.json
|- package-lock.json
那我们怎么打包呢？在 package.json 中配置如下属性：
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "webpack --config ./config/webpack/webpack.common.config.js"
},
好了，我们试试怎么打包吧，虽然你的 index.js 中什么代码也没有。
在控制台中输入以下代码：
npm run start
npm run xxxx 会去执行当前目录下package.json里面的script同名脚本
我们的【npm run start】相当于直接执行了我们写在【start】里面的代码。
执行之后，你会发现根目录多出了一个文件夹： dist/js ，其中有一个js文件： bundle.js ，那么至此，我们已经成功编译打包了一个js文件，即入口文件： index.js 。
安装React
在控制台输入以下代码：
npm install --save react react-dom
–save就是运行时会用到的代码
具体和–dev-save的区别可以自己Google一下
在【src/index.js】里面加入以下代码
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<>
Hello World！
</>
)
ReactDOM.render(<App />, document.getElementById('root'));
在根目录加入文件夹【public】，然后在【public】里面加入【index.html】
目录如下：
webpackInit
+ |- public
+ |- index.html
|- config
|- webpack
|- webpack.common.config.js
|- node_modules
|- src
|- index.js
|- package.json
|- package-lock.json
然后在【index.html】加入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>从零配置Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
OK
万事俱备，我们运行：
npm run start
打包失败了。。。为什么呢？
使用babel
为什么我们上面写jsx会打包不了呢，因为webpack根本识别不了jsx语法，那怎么办？使用loader对文件进行预处理。
其中，babel-loader，就是这样一个预处理插件，它加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。那开始配置它吧！
首先安装babel相关的模块：
npm install --save-dev babel-loader @babel/preset-react @babel/preset-env @babel/core babel-plugin-import
- **babel-loader：**使用Babel和webpack来转译JavaScript文件。
- **@babel/preset-react：**转译react的JSX
- **@babel/preset-env：**转译ES2015+的语法
- **@babel/core：**babel的核心模块
- babel-plugin-import：按需加载所需要的babel解析
理论上我们可以直接在 webpack.common.config.js 中配置"options"，但最好在当前根目录，注意，一定要是根目录！！！ 新建一个配置文件 .babelrc 配置相关的"presets"：
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
// 大于相关浏览器版本无需用到 preset-env
"edge": 17,
"firefox"
最低0.47元/天 解锁文章
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
