一小时的时间，上手 Webpack
source link: https://tuture.co/2020/03/18/@70fc9b9/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
慢一拍
查看代码
序言
为什么要用构建工具？如果你只会js+css+html，最多再加上jquery，那么当你听到构建工具这个说法是不是蒙的？这种情况下我不建议你学习webpack，建议你学下 vue 或者 react 框架，这两个框架都有自己的脚手架，所谓脚手架就是别人用构建工具帮你搭好了原始项目，你可以在不懂构建工具的情况下进行前端开发。不过这就是初级前端的基本工作，给我一个环境，让我安心的写业务代码。
实际上，仅仅做上述工作也没什么不好，你可以钻研 css，研究js深度语法，甚至去不断精进算法与数据结构都是高级进阶之路。
我想说的是如果你有一天对webpack感兴趣了，ok，欢迎你来到大前端世界！webpack是一个强大且可扩展的前端构建工具，还有包括grunt、gulp等同类工具都是基于node.js为底层驱动平台实现的。
为什么需要构建或者说编译呢？因为像es6、less及sass、模板语法、vue指令及jsx在浏览器中是无法直接执行的，必须经过构建这一个操作才能保证项目运行，所以前端构建打包很重要。除了这些，前端构建还能解决一些web应用性能问题，比如：依赖打包、资源嵌入、文件压缩及hash指纹等。具体的我不再展开，总之前端构建工程化已经是趋势。
至于为什么选择webpack，因为这个工具配置非常灵活，支持插件化扩展，社区生态很丰富，官方迭代更新速度快，作为程序员，这是一个靠谱的选择。
好了，废话不多说，下面直接上干货，教你半小时上手，用webpack构建开发一个小项目。学东西要快，可以不用理解清楚每个概念，先动手，不然等你学会得要一个星期了。
node安装
首先要保证你的电脑有node环境，node安装比较简单，直接在官网 https://nodejs.org/en/下载node安装包就可以了，注意这里有两个版本，左边是稳定版本，右边是最新版本，一般用稳定版本就可以了。具体的安装过程不是本文的主要内容，网上有很多安装教程。有了node环境，后面就可以通过npm进行webpack的安装，npm是一个包管理工具，安装node就会自动安装npm。如果有必要我可以在我的公众号里也写个教程。
webpack安装及配置
webpack安装
首先创建一个my_webpack文件夹作为项目文件夹，进入当前文件夹，通过命令行工具cmd执行以下命令：
npm init -y npm install webpack webpack-cli --save-dev
安装完了检查版本，确认安装成功
./node_modules/.bin/webpack -v
安装成功后，文件夹下面会有这些内容
webpack配置
然后在根目录创建一个空配置文件webpack.config.js，创建以下内容：
'use strict'
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.join(__dirname,'dist'),
filename: 'index.js'
},
mode: 'production',
}
entry代表打包入口，output需要指定输出地址及打包出来的文件名，mode指开发环境。然后在项目根目录中创建src文件夹及dist文件夹，src文件夹里创建index.js及hellowebpack.js两个文件，最后在dist目录创建一个index.html文件，完整目录如下：
hellowebpack.js文件里输入以下内容：
export function hellowebpack() {
return 'hellowebpack'
}
```
接着在index.js中引用hellowebpack.js文件中的这个函数
```js
import {hellowebpack} from './hellowebpack'
document.write(hellowebpack())
这个时候到./node_modules/.bin/目录下执行webpack打包命令，我们会看到dist目录下多出一个index.js文件，打开会看到压缩代码。
我们在dist目录下的indext.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>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>
看到这应该明白了吧，在src目录下面是开发内容，后面用 webpack 代码打包后，会在 dist 目录下生成一个 index.js 文件，最后在index.html页引用，这就是webpack打包项目的基本流程。
前面在运行打包要进入 ./node\_modules/.bin/ 目录下执行 webpack打包命令，比较麻烦，这里添加一个配置就可以更方便打包。在 package.json 文件下的 script 节点添加一项配置 "build": "webpack" ，然后再删掉 dist 目录，再运行 npm run build 就可以方便地打包了。
webpack入门示例
webpack解析es6
到这一步需要掌握一个新的概念：loaders，所谓loaders就是说把原本webpack不支持加载的文件或者文件内容通过loaders进行加载解析，实现应用的目的。这里讲解es6解析，原生支持js解析，但是不能解析es6，需要babel-loader ，而babel-loader 又依赖babel。来看步骤：先安装babel-loader，
npm i @babel/core @babel/preset-env babel-loader -D
再在根目录创建 .babelrc 文件，增加以下内容
{
"presets": [
"@babel/preset-env",
]
}
```
接着在webpack.config.js文件下添加module属性，属性内容是一个rules集合，内容如下
```js
// ...
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
]
}
// ...
rules集合的每个元素都是一个文件类型的配置信息，这里只有一个js文件，后面会讲到css、less及各种格式的图片等；test是一个正则，用来匹配文件后缀名；use表示此loader名称。
前面例子里创建了hellowebapck.js文件，然后在index.js文件中被引用。里面用到的import是es6方法，有的浏览器并不支持es6，如果直接用webpack打包在这浏览器上是会出错的，但是刚才已经安装并配置了babel-loader，可以实现解析es6方法，babel还可以解析jsx语法。现在执行npm run build进行构建，就可以看到效果是成功的。（这个其实用一个ie浏览器就可以验证es6解析前后的效果）
webpack加载css、less等样式文件
css-loader用于加载css文件并生成commonjs对象，style-loader用于将样式通过style标签插入到head中
安装loader
npm i style-loader css-loader -D
```
```js
// ...
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
}
// ...
注意，这里的解析css用到了两个loader，所以use对象里是个数组，需要格外注意到loader顺序，是先写style-loader，再写css-loader,但是执行的时候是先加载css-loader，将css解析好后再将css传递给style-loader；
接下来在项目中加一个public.css文件，在里面写入一个样式：
.color-text {
font-size: 20px;
color: red
}
将此文件在src/index.js文件中引用，如下所示。
我们知道此文件做为打包入口文件，最后打包后在dist目录下，我们可以直接到dist目录下的index.html文件内，添加一个div标签，加上样式名color-text，以验证样式打包及引用效果
<body>
<script src="./index.js" type="text/javascript"></script>
<div class="color-text">text-color</div>
</body>
然后运行npm run build命令，执行成功后，在浏览器打开dist目录下index.html文件，会看到以下内容，样式文件被成功打包并发挥了作用：
解析less文件也是一样的，直接把public.css文件改成less后缀，此时是不能解析的，需要安装less依赖，添加配置。
安装less相关依赖
npm i less less-loader -D
添加less文件解析配置
// ...
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
]
}
// ...
这些步骤完成后，再运行 npm run build 命令进行打包，最后在浏览器查看 dist\index.html ，会发现效果是一样的。
webpack加载图片
图片在webpack中的打包步骤跟上面类似，只不过loader不同。
安装file-loader
执行以下命令，安装file-loader依赖
npm i file-loader -D
然后在webpack.config.js配置文件 module 节点下添加解析配置内容：
{
test: /.(jpg|png|gif|jpeg)$/,
use: 'file-loader'
}
随便找一张图片放在src目录下，在同级目录的public.css文件中加上背景图片样式，输入内容如下：
.color-text {
font-size: 20px;
color: red;
height: 500px;
background: url(beautiful.jpg) no-repeat;
}
然后运行npm run build命令进行构建，最后执行时并没有图片展示，但是我们在dist目录下发现了刚才打包过来的图片，如图所示。这就尴尬了，虽然图片是打包过来了，问题是我每次还在拷贝复制一下名称再引用，这很不科学。
有没有更好的办法加载图片呢？答案是肯定的！看步骤：
安装url-loader
npm i url-loader -D
url-loader直接内置了file-loader，是对它的再封装，在配置文件里可以直接去掉file，用url替换。
在webpack.config.js文件添加配置内容，注意limit是指图片大小上限，单位是字节，如果图片大小小于这个值，就会被打包为base64格式，否则就仍是图片。由于这个图片有120K，我这里设置为160000，差不多是150多K了。
{
test: /.(jpg|png|gif|jpeg)$/,
use: [{
loader:'url-loader',
options: {
limit:160000,
name: 'imgs/[name].[hash].[ext]'
}
}]
}
执行npm run build查看效果，发现成功了，再看dist目录下的index.js文件，发现内容多了很多，其实就是多了这张图片的base64数据。
好了，这篇文章就写到这里，如果你按我的步骤来，一定可以轻松体验入门。当然，要真正达到应用水平，还要继续深入学习，webpack的内容还有很多，比如如何加载vue指令或者jsx语法，如何打包组件等，后面我会继续带来入门教程。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK