一小时的时间，上手 Webpack

时间 2020-03-20

标签一小时时间上手 webpack 繁體版

原文原文链接

本文由公众号 字节逆旅 的主笔 慢一拍 写做而成，慢一拍 已认证成为图雀社区专栏做者，后续将为你们带来一系列 Webpack 的文章，敬请期待✌️。欢迎加入图雀社区，一块儿创做精彩的免费技术实战教程，加速技术的传播！javascript

若是您以为咱们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励咱们写出更好的教程💪css

为何要用构建工具？若是你只会js+css+html，最多再加上jquery，那么当你听到构建工具这个说法是否是蒙的？这种状况下我不建议你学习webpack，建议你学下 vue 或者 react 框架，这两个框架都有本身的脚手架，所谓脚手架就是别人用构建工具帮你搭好了原始项目，你能够在不懂构建工具的状况下进行前端开发。不过这就是初级前端的基本工做，给我一个环境，让我安心的写业务代码。html

实际上，仅仅作上述工做也没什么很差，你能够钻研 css，研究js深度语法，甚至去不断精进算法与数据结构都是高级进阶之路。前端

我想说的是若是你有一天对webpack感兴趣了，ok，欢迎你来到大前端世界！webpack是一个强大且可扩展的前端构建工具，还有包括grunt、gulp等同类工具都是基于node.js为底层驱动平台实现的。vue

为何须要构建或者说编译呢？由于像es六、less及sass、模板语法、vue指令及jsx在浏览器中是没法直接执行的，必须通过构建这一个操做才能保证项目运行，因此前端构建打包很重要。除了这些，前端构建还能解决一些web应用性能问题，好比：依赖打包、资源嵌入、文件压缩及hash指纹等。具体的我再也不展开，总以前端构建工程化已是趋势。java

至于为何选择webpack，由于这个工具配置很是灵活，支持插件化扩展，社区生态很丰富，官方迭代更新速度快，做为程序员，这是一个靠谱的选择。node

好了，废话很少说，下面直接上干货，教你半小时上手，用webpack构建开发一个小项目。学东西要快，能够不用理解清楚每一个概念，先动手，否则等你学会得要一个星期了。react

1、node安装

首先要保证你的电脑有node环境，node安装比较简单，直接在官网https://nodejs.org/en/下载node安装包就能够了，注意这里有两个版本，左边是稳定版本，右边是最新版本，通常用稳定版本就能够了。具体的安装过程不是本文的主要内容，网上有不少安装教程。有了node环境，后面就能够经过npm进行webpack的安装，npm是一个包管理工具，安装node就会自动安装npm。若是有必要我能够在个人公众号里也写个教程。jquery

2、webpack安装及配置

一、webpack安装

首先建立一个my_webpack文件夹做为项目文件夹，进入当前文件夹，经过命令行工具cmd执行如下命令：webpack

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文件中的这个函数

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 就能够方便地打包了。

3、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集合，内容以下

// ...
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
复制代码

// ...
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语法，如何打包组件等，后面我会继续带来入门教程。

想要学习更多精彩的实战技术教程？来图雀社区逛逛吧。

若是您以为咱们写得还不错，但愿您能给❤️这篇文章点赞❤️哦