• webpack 基础配置


    常见配置

    1. 文件打包的出口和入口
    2. webpack如何开启一台服务
    3. webpack 如何打包图片,静态资源等。
    4. webpack 配置 loader
    5. 配置 plugin
    6. 配置sourceMap
    7. 配置 babel 语法降级等

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

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

    npm init 或者 yarn init

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

    在这里插入图片描述
    运行上方代码

    接着 我们就得到了一个 package.json 文件 , 该文件就是用来保存,运行脚本 , 依赖包 , 版本信息等等配置文件。
    然后,我们需要在根目录下创建一个 webpack.config.js文件 ,该文件就是编写webpack的一些配置的文件。

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

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

    在这里插入图片描述

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

    3: 运行脚本执行

    package.json 文件中 配置脚本

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

    接下来 你只需要执行 npm run build 就可以对项目进行构建了。
    4 :webpack配置打包的入出口文件

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

    5: webpack开启本地服务

    • 下载 webpack-dev-server 依赖
      webpack-dev-server 原理:
      • 在本地开启一台 express 服务器。

      • package.json 文件中 ,加上上面这段配置,接下来你可以 npm run dev,浏览器中输入 http://localhost:8080/

          "dev": "webpack-dev-server"
        
        • 1

        同时 你也可以在 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'
         }
        }
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14

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

        • 页面白屏
          先说原因,由于 我们访问 http://localhost:8080 打包完成后 默认访问的是 dist 目录下的index.html 但我们发现打包完成后 , dist 目录下并没有index.html 所以就没找到资源。
          在这里插入图片描述
          解决方法
          通过 html-webpack-plugin插件 可以在打包完成后会自动在 dist 目录下 创建一个 index.html ,但需要你编写它的配置。

          const HtmlWebpackPlugin = require('html-webpack-plugin')
          module.exports = {
            plugins : [
              new HtmlWebpackPlugin({
                filename : 'index.html',  // 生成的文件名
                template : '/index.html' // 将哪个模板作为html
              })
            ],
          }
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

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

        webpackcss , less sass 静态资源的处理。

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

        • 打包 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 
        
        • 1
        • 2
        • 3
        • 4
        • 5

        配置 webpack.config.js

        // 在配置中 添加该选项 
        module : {
        rules : [
            {
            test : /\.css$/,
            use : ['style-loader','css-loader']
            }
                ] 
        }
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9

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

        插入一条 常见面试题

        面试官 : style-loader 和 css-loader 的区别?

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

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

          import './styles/index.less'; // 导入我们的 less文件 
          console.log('111');
          
          less复制代码.name {
            color:  red;
          }
          ul> li {
            font-size: 25px;
          }
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          当你编写完成后 , 保存,终端会 提示,你可能需要一个 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 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

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

          yarn add less-loader sass-loader -D 或者
          npm install less-loader sass-loade -D 
          
          • 1
          • 2
           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']
                }
              ]
            },
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16

          3:webpack 处理静态资源

          问题 : 图片资源以相对路径引入打包后,webpack无法展示。
          原因 :

          • 我们服务开启后,index.html中 通过 ./ 寻找,

          • 但打包完成的 dist 目录下根本没有这张1.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/1.png" alt="">
              <ul>
                <li>
                  dasdasdasdas
                </li>
              </ul>
              <script src="./main.js"></script>
            </body>
            </html>
            
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9
            • 10
            • 11
            • 12
            • 13
            • 14
            • 15
            • 16
            • 17
            • 18
            • 19

            下载 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] :生成哈希值字符串
                    }
                   }
                  }
                ]
              },
            
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9
            • 10
            • 11
            • 12
            • 13
            • 14
            • 15
            • 16
            • 17
            • 18
            • 19
            • 20
            • 21
            • 22
            • 23

          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/
                    
             },
            
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9

            或者 在根目录下创建 .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"]
            }
            
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6

          webpack 配置 sourceMap

          • 什么是 suorceMap
            其实很多人对 sourceMap的理解很 抽象 , 这到底是个 什么东西?
            • 简单来说 sourceMap 生成映射文件 其实就是为了 提高开发效率,更快的映射到代码的每一行,比如说当前我们控制台有打印,sourceMap 就能够更快的帮你定位到 当前打印的那一行。

          配置
          webpack.config.js 中 添加

           devtool : 'cheap-module-source-map'
          
          • 1

          思考

          • 为什么执行 npx webpack 而不是 npm webpack ?
            解释 : 在平时 开发中 我们 一般会在项目依赖webpack 打包 是在项目中进行下载的 ,开箱即用的效果,并不会在我们电脑上装载webpack构建工具, 当然你也可以 在全局安装 , 而npx 就会在当前项目下寻找webpack 进行构建
  • 相关阅读:
    评价——层次分析
    Power Modeling and Analysis
    LeetCode 剑指 Offer 10- I. 斐波那契数列
    简单迅速解决windows电脑下载windows应用商店(Microsoft Store)
    Delphi的系统模块全部采用汇编语言开发-这执行效率在传奇时代估计是叼咋天,难怪能开发出中国最大游戏IP-传奇
    猿创征文|前路有光,初心莫忘,从编程小白,到如今小有所成,我这一路是如何走来的?
    Nginx的核心配置文件
    解决使用数组产生的堆问题
    【数据结构】双向链表
    HTML&CSS
  • 原文地址:https://blog.csdn.net/qq_34574204/article/details/132874502