前端必备webpack配置说明

前端小张同学的掘金-webpack打包

大家好，我是前端小张同学，今天在这跟大家分享一下webpack中的一些简单的配置吧。

首先在，学习 webpack 之前我们先说一下常见的webpack打包操作。

1：常见配置

文件打包的出口和入口
webpack如何开启一台服务
webpack 如何打包图片，静态资源等。
webpack 配置 loader
配置 plugin
配置sourceMap
配置 babel 语法降级等

接下来，我们先从 webpack 的基本配置开始吧！

在准备配置之前 , 搭建一个 webpack 工程，你可以在自己的工程下

执行

npm init
或者
yarn init <span class="copy-code-btn">复制代码</span>

1：你可以设置项目名称,描述，入口文件, 发布的url 等等，你也可以一路Enter下去。

运行上方代码

接着我们就得到了一个package.json 文件, 该文件就是用来保存，运行脚本，依赖包，版本信息等等配置文件。

然后，我们需要在根目录下创建一个webpack.config.js文件 ,该文件就是编写webpack的一些配置的文件

2：依赖包下载

上面我们已经将文件创建出来了，接下来，我们既然需要依赖webpack 对项目进行打包，那我们就需要下载对应的资源包。

<span class="hljs-comment">//下载webpack cli ，这里的-D 是指开发时依赖的资源包，到生产上就不会再下载了</span> npm install -D webpack-cli <span class="copy-code-btn">复制代码</span>

下载，完成后执行npx webpack，webpack 会将 src/index.js进行打包输出到 dist 目录下

3：运行脚本执行

3.1 ： scripts

你也可以在你的package.json文件中配置脚本例如

<span class="hljs-attr">"test"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">"build"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"webpack"</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">"watch"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"webpack --watch"</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">"dev"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"webpack-dev-server"</span> <span class="copy-code-btn">复制代码</span>

接下来你只需要执行npm run build就可以对项目进行构建了。

4 ：webpack配置打包的入出口文件

<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
  entry : <span class="hljs-string">'./src/index.js'</span> <span class="hljs-comment">// 配置打包入口文件</span> output : { <span class="hljs-comment">// 配置打包完成的出口文件 路径 </span> path : path.<span class="hljs-title function_">resolve</span>(__dirname , <span class="hljs-string">'./dist/'</span>),
    filename : <span class="hljs-string">'building.js'</span> }
} <span class="copy-code-btn">复制代码</span>

5： webpack开启本地服务

5.1 下载 webpack-dev-server 依赖

webpack-dev-server原理：在本地开启一台 express 服务器。
在package.json 文件中，加上上面这段配置，接下来你可以npm run dev，浏览器中输入 http://localhost:8080/

<span class="hljs-string">"dev"</span>: <span class="hljs-string">"webpack-dev-server"</span> <span class="copy-code-btn">复制代码</span>

同时你也可以在webpack.config.js文件中配置devServer

<span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">"path"</span>); <span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
 devServer : { <span class="hljs-comment">// </span> host : <span class="hljs-string">'localhost'</span>, <span class="hljs-comment">// 服务启动的 ip 地址 localhost 即本地</span> port : <span class="hljs-string">'3000'</span>, <span class="hljs-comment">// 开启的端口</span> open : <span class="hljs-literal">true</span> <span class="hljs-comment">// 是否开启服务后 打开浏览器</span> },
 entry : <span class="hljs-string">'./src/index.js'</span>,
 output : {
   path : path.<span class="hljs-title function_">resolve</span>(__dirname , <span class="hljs-string">'./dist/'</span>),
   filename : <span class="hljs-string">'building.js'</span> }
} <span class="copy-code-btn">复制代码</span>

于是你发现了一个神奇的问题，页面白屏了，报错找不到资源。

页面白屏

先说原因，由于我们访问 http://localhost:8080 打包完成后默认访问的是 dist 目录下的index.html 但我们发现打包完成后， dist 目录下并没有index.html 所以就没找到资源。

解决方法
通过html-webpack-plugin插件可以在打包完成后会自动在 dist 目录下创建一个 index.html ，但需要你编写它的配置。

<span class="hljs-keyword">const</span> <span class="hljs-title class_">HtmlWebpackPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>) <span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
  plugins : [ <span class="hljs-keyword">new</span> <span class="hljs-title class_">HtmlWebpackPlugin</span>({
      filename : <span class="hljs-string">'index.html'</span>, <span class="hljs-comment">// 生成的文件名</span> template : <span class="hljs-string">'/index.html'</span> <span class="hljs-comment">// 将哪个模板作为html</span> })
  ],
} <span class="copy-code-btn">复制代码</span>

配置完成后，需要先打包，再重新启动服务即可正常显示。

webpack 对 css ， less sass 静态资源的处理。

我们知道 webpack 打包 css 的时候是将所有的 css 注入到 html 文件的 style 标签中，然后才会样式生效。

1 ：打包 css

那如何让 webpack帮助我们将 css 进行打包呢？

下载 css-loader 和 style-loader

yarn add css-loader -D 
yarn add style-loader -D 
或者 
npm install  css-loader -D 
npm install style-loader -D <span class="copy-code-btn">复制代码</span>

配置webpack.config.js

<span class="hljs-comment">// 在配置中 添加该选项 </span> <span class="hljs-variable language_">module</span> : {
rules : [
    {
    test : <span class="hljs-regexp">/\.css$/</span>,
    use : [<span class="hljs-string">'style-loader'</span>,<span class="hljs-string">'css-loader'</span>]
    }
        ] 
} <span class="copy-code-btn">复制代码</span>

注意，webpack 解析 loader的顺序是从右到左进行解析。

插入一条常见面试题

面试官 ：style-loader 和 css-loader的区别？

css-loader ，主要是解析我们编写的 css ,因为 css 本身并不是一个模块，所以在js 中导入 css 你就需要css-loader来识别它们，而 style-loader 就是将 css-loader 解析完的结果，作为样式内容插入到 html style标签内，这样我们样式就生效了。

2：处理 less sass

我们开发中常用的 less sass 这些预处理器编写的 css 怎么处理呢 ? 接下来要讲的是webpack处理 less sass 编写的样式

index.js

<span class="hljs-keyword">import</span> <span class="hljs-string">'./styles/index.less'</span>; <span class="hljs-comment">// 导入我们的 less文件 </span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'111'</span>); <span class="copy-code-btn">复制代码</span>

<span class="hljs-selector-class">.name</span> { <span class="hljs-attribute">color</span>:  red;
} <span class="hljs-selector-tag">ul</span>> <span class="hljs-selector-tag">li</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">25px</span>;
} <span class="copy-code-btn">复制代码</span>

当你编写完成后，保存，终端会提示,你可能需要一个 loader 来处理这种文件类型。

ERROR in ./src/styles/index.less 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .name {
|   color:  red;
| }
 @ ./src/index.js 1:0-29 <span class="copy-code-btn">复制代码</span>

我们在此时需要下载一个less-loader

yarn add less-loader sass-loader -D 或者
npm install less-loader sass-loade -D <span class="copy-code-btn">复制代码</span>

你以为下载完就不报错了吗？错错错，是我的错，是因为你没配置对应解析 less 的 loader。

如何配置？

<span class="hljs-variable language_">module</span> : {
    rules : [
      {
        test : <span class="hljs-regexp">/\.css/</span>,
        use : [<span class="hljs-string">'style-loader'</span> , <span class="hljs-string">'css-loader'</span>]
      },
      {
        test : <span class="hljs-regexp">/\.less/</span>,
        use : [<span class="hljs-string">'style-loader'</span> , <span class="hljs-string">'css-loader'</span> , <span class="hljs-string">'less-loader'</span>]
      },
      {
        test : <span class="hljs-regexp">/\.sass/</span>,
        use : [<span class="hljs-string">'style-loader'</span> , <span class="hljs-string">'css-loader'</span> , <span class="hljs-string">'sass-loader'</span>]
      }
    ]
  }, <span class="copy-code-btn">复制代码</span>

3：webpack 处理静态资源

问题：图片资源以相对路径引入打包后，webpack无法展示。

原因：我们服务开启后，index.html中通过 ./ 寻找，但打包完成的 dist 目录下根本没有这张Vue3.png这张图片，这是由于webpack打包并没有将我们的静态资源打包进去,接下来就看一下如何将静态资源添加到webpack打包选项中去吧。

<span class="hljs-meta">html</span>> <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"IE=edge"</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Document<span class="hljs-tag"><!--<span class="hljs-name"-->title</span>> <span class="hljs-tag"><!--<span class="hljs-name"-->head</span>> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"name"</span>></span>张三<span class="hljs-tag"><!--<span class="hljs-name"-->div</span>> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./src/img/Vue3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span> dasdasdasdas <span class="hljs-tag"><!--<span class="hljs-name"-->li</span>> <span class="hljs-tag"><!--<span class="hljs-name"-->ul</span>> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./main.js"</span>></span><span class="hljs-tag"><!--<span class="hljs-name"-->script</span>> <span class="hljs-tag"><!--<span class="hljs-name"-->body</span>> <span class="hljs-tag"><!--<span class="hljs-name"-->html</span>> <span class="copy-code-btn">复制代码</span>

下载 file-loader 或者 url-loader --->npm install file-loader -D 或者 yarn add file-loader -D

配置

<span class="hljs-variable language_">module</span> : {
    rules : [
      {
        test : <span class="hljs-regexp">/\.css$/</span>,
        use : [<span class="hljs-string">'style-loader'</span> , <span class="hljs-string">'css-loader'</span>]
      },
      {
        test : <span class="hljs-regexp">/\.less$/</span>,
        use : [<span class="hljs-string">'style-loader'</span> , <span class="hljs-string">'css-loader'</span> , <span class="hljs-string">'less-loader'</span>]
      },
      {
      test : <span class="hljs-regexp">/\.(png|jpeg|jpg|bmp)$/</span>,
       use : {
        loader : <span class="hljs-string">'file-loader'</span>, <span class="hljs-comment">// 使用的什么loader 当然你也可以使用 url-loader ，url-loader是封装了file-loaer。</span> <span class="hljs-attr">options</span>: {
         outputPath : <span class="hljs-string">'images'</span>, <span class="hljs-comment">// 输出到 dist 哪个 目录下,</span> limit : <span class="hljs-number">5</span> * <span class="hljs-number">1024</span>,
         name : <span class="hljs-string">'[name].[ext]'</span> <span class="hljs-comment">// 生成的文件名称 [name] : 原文件名称 [ext] : 原文件后缀 ， [hash] :生成哈希值字符串</span> }
       }
      }
    ]
  }, <span class="copy-code-btn">复制代码</span>

更多配置请看 webpack ---> url-loader

webpack 之 babel编译js高级语法代码

我们在编写 js时一般会使用ES6一些高级语法特性，但此时有些旧的版本浏览器本身是不支持这些高级语法的，例如 es6 里的 class ，其实就是原型继承的语法糖，如果class不做降级处理，会照成程序暂停运行情况。

那我们接下来先了解一下，与 bebel 相关的一些降级核心包。

1.@babel/babel-core// babel的核心包
2.@babel/preset-env// babel 的语法转换包
3.babel-loader// babel-loader 对语法进行编译转换的loader
在转换之前，你需要先下载该包,下载完成之后，我们接下来进行配置,在 rules 规则中新增一条匹配规则

{ 
        test : <span class="hljs-regexp">/\.js$/</span>,
        use : {
          loader : <span class="hljs-string">'babel-loader'</span>,

        },
        exclude : <span class="hljs-regexp">/node_modules/</span> }, <span class="copy-code-btn">复制代码</span>

或者在根目录下创建.babelrc文件在里面编写相关配置

{ <span class="hljs-comment">// babel-plugin-transform-class-properties 对 es6 class 进行转换插件 </span> <span class="hljs-comment">// @babel/plugin-transform-runtime // 帮助你节省代码体积</span> <span class="hljs-string">"presets"</span> : [<span class="hljs-string">"@babel/env"</span>], <span class="hljs-string">"plugins"</span>: [<span class="hljs-string">"@babel/plugin-transform-runtime"</span> , <span class="hljs-string">"babel-plugin-transform-class-propertiess"</span>]
} <span class="copy-code-btn">复制代码</span>

webpack 配置 sourceMap

什么是 suorceMap ？

其实很多人对 sourceMap的理解很抽象，这到底是个什么东西？

简单来说 sourceMap 生成映射文件其实就是为了提高开发效率，更快的映射到代码的每一行，比如说当前我们控制台有打印，sourceMap 就能够更快的帮你定位到当前打印的那一行。

配置

在 webpack.config.js 中添加

devtool : <span class="hljs-string">'cheap-module-source-map'</span> <span class="copy-code-btn">复制代码</span>

思考

为什么执行 npx webpack 而不是 npm webpack ?

解释：在平时开发中我们一般会在项目依赖webpack 打包是在项目中进行下载的，开箱即用的效果，并不会在我们电脑上装载webpack构建工具，当然你也可以在全局安装，而npx 就会在当前项目下寻找webpack 进行构建。

好了，最后到这次本章了解的知识就到此结束了，下一张为大家准备更多的webpack打包配置，多页面打包等等，如果你觉得有用，请一键三连吧，谢谢。