浅析webpack的入门配置

站长

2023年07月07日 17:52 · 阅读数 12

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

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

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

1：常见配置

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

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

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

执行

npm init
或者
yarn init

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

浅析webpack的入门配置

运行上方代码

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

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

2：依赖包下载

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

//下载webpack cli ，这里的-D 是指开发时依赖的资源包，到生产上就不会再下载了
npm install -D webpack-cli

浅析webpack的入门配置

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

3：运行脚本执行

3.1 ： scripts

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

    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server"

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

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

module.exports = {
  entry : './src/index.js'  // 配置打包入口文件
  output : { // 配置打包完成的出口文件 路径 
    path : path.resolve(__dirname , './dist/'),
    filename : 'building.js'
  }
}

5： webpack开启本地服务

5.1 下载 webpack-dev-server 依赖

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

  "dev": "webpack-dev-server"

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

const path = require("path");

module.exports = {
 devServer : {  // 
   host : 'localhost', // 服务启动的 ip 地址 localhost 即本地
   port : '3000', // 开启的端口
   open : true // 是否开启服务后 打开浏览器
 },
 entry : './src/index.js',
 output : {
   path : path.resolve(__dirname , './dist/'),
   filename : 'building.js'
 }
}

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

页面白屏

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

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

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins : [
    new HtmlWebpackPlugin({
      filename : 'index.html',  // 生成的文件名
      template : '/index.html' // 将哪个模板作为html
    })
  ],
}

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

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

配置 webpack.config.js

// 在配置中 添加该选项 
module : {
rules : [
    {
    test : /\.css$/,
    use : ['style-loader','css-loader']
    }
        ] 
}

注意，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

import './styles/index.less'; // 导入我们的 less文件 
console.log('111');

.name {
  color:  red;
}
ul> li {
  font-size: 25px;
}

当你编写完成后，保存，终端会提示,你可能需要一个 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

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

yarn add less-loader sass-loader -D 或者
npm install less-loader sass-loade -D

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

如何配置？

 module : {
    rules : [
      {
        test : /\.css/,
        use : ['style-loader' , 'css-loader']
      },
      {
        test : /\.less/,
        use : ['style-loader' , 'css-loader' , 'less-loader']
      },
      {
        test : /\.sass/,
        use : ['style-loader' , 'css-loader' , 'sass-loader']
      }
    ]
  },

3：webpack 处理静态资源

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="name">张三</div>
  <img src="./src/img/Vue3.png" alt="">
  <ul>
    <li>
      dasdasdasdas
    </li>
  </ul>
  <script src="./main.js"></script>
</body>
</html>

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

配置

module : {
    rules : [
      {
        test : /\.css$/,
        use : ['style-loader' , 'css-loader']
      },
      {
        test : /\.less$/,
        use : ['style-loader' , 'css-loader' , 'less-loader']
      },
      {
      test : /\.(png|jpeg|jpg|bmp)$/,
       use : {
        loader : 'file-loader', // 使用的什么loader 当然你也可以使用 url-loader ，url-loader是封装了file-loaer。
        options: {
         outputPath : 'images', // 输出到 dist 哪个 目录下,
         limit : 5 * 1024,
         name : '[name].[ext]' // 生成的文件名称 [name] : 原文件名称 [ext] : 原文件后缀 ， [hash] :生成哈希值字符串
        }
       }
      }
    ]
  },

更多配置请看 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 : /\.js$/,
        use : {
          loader : 'babel-loader',

        },
        exclude : /node_modules/
        
 },

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

{
// babel-plugin-transform-class-properties 对 es6 class 进行转换插件 
// @babel/plugin-transform-runtime // 帮助你节省代码体积
  "presets" : ["@babel/env"],
  "plugins": ["@babel/plugin-transform-runtime" , "babel-plugin-transform-class-propertiess"]
}

webpack 配置 sourceMap

什么是 suorceMap ？

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

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

配置

在 webpack.config.js 中添加

 devtool : 'cheap-module-source-map'

思考

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

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

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

转载自:https://juejin.cn/post/7220671243958960186

浅析webpack的入门配置

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

1： 常见配置

2： 依赖包 下载

3： 运行脚本执行

3.1 ： scripts

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

5： webpack开启本地服务

5.1 下载 webpack-dev-server 依赖

页面白屏

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

1 ：打包 css

2： 处理 less sass

如何配置 ？

3：webpack 处理静态资源

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

webpack 配置 sourceMap

配置

思考

1：常见配置

2：依赖包下载

3：运行脚本执行

2：处理 less sass

如何配置？