WebPack基本使用

2022-04-10 02:00:57 阅读：179 来源： 互联网

标签：基本文件 webpack loader WebPack build 使用 js css

入口和出口文件：

在我们打包一个项目的时候，他们都有默认的出口和入口文件，入口(./src/index.js) 出口(./dist)，那么我如果我的项目，入口比如是./src/main.js，出口是./build，该去如何指定呢？

1.在命令的后面加选项如：npx webpack --entry ./src/main.js --output-path ./build

2.在package.json的scripts中指定："build": "webpack --entry ./src/main.js --output-path ./build" 那么我们要打包的话只需要执行 npm run build 指令

除了以上两种配置之外我们还可以单独在项目目录中配置一个单独的webpack配置文件

webpack.config.js

webpack.config.js导出一个配置对象，由于webpack查找到这个文件并且读取文件中的信息的时候使用的是commonjs(node环境下执行)的方式所以我们就用module.exports的方式去导出一个配置对象

入口出口：

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    // 输出入文件的名字
    filename: "bundle.js",
    // 输出的地方(不能直接写./build)这里要写绝对路径
    // path(node的内置模块)__dirname(当前文件所在的绝对路径),拼接上./build
    path: path.resolve(__dirname, "./build")
  }
}

那么我们的package.json中 "build": "webpack"，这样写就可以了，直接去执行npm run build

如果我的文件不叫webpack.config.js会发生什么，首先看看npm run build都做了什么

npm run build执行都做了什么：当我们执行npm run build的时候，他实际去执行了webpack的命令，当我们执行webpack的命令时又做了什么，首先它会去看一下，当前所在文件夹下边有没有一个叫webpack.config.js的文件，如果有他就会依赖这个文件中相关的配置，开始执行编译过程

如果没有这个文件会发生什么？它会去src文件夹中去找index.js，找不到就会报错，扎到就执行编译过程

如果我们的配置文件不想叫webpack.config.js，或者我想单独给他创建一个目录，放在其目录中怎么办

那么在package.json的scripts中设置"build webpack --config ./wp.config.js"
下次再执行npm run build的时候会默认去当前目录中去找wp.config.js并且依赖这个文件中的配置

官方文档地址：命令行接口（CLI） | webpack 中文文档 (docschina.org)

Webpack依赖图

假如我在项目中安装了element，但是没有使用，会不会打包进我最后生成的build.js文件中去

当我们安装了某个工具，但是在项目中没有对他进行一个引用，那么他最终不会打包进我最后生成的build.js文件中去 (Tree Shaking)

实际上webpack在处理应用程序时，它会根据命令或配置文件找到入口，从入口开始，会生成一个依赖图，这个依赖关系图会包含引用程序中所需的所有模块，然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析)

loader是什么?

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

loader可以用于对模块的源代码进行转换
我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
在加载这个模块时，webpack其实并不知道如何对其模块进行加载，我们必须制定对应的loader来完成这个功能

css-loader的使用

当我们需要在js文件中动态的去创建一个HTML元素，并且给这个元素一个样式，那么我们可以单独创建一个css文件夹里面包含一个xxx.css在当前文件中引入

这么做会发生什么？
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

上面的错误信息告诉我们需要一个loader来加载这个css文件

下载 css-loader

npm i css-loader -D

loader的两种使用方案

内联方式
import 'css-loader!../css/index.css';

配置方式
在我们的webpack.config.js文件中写明配置

module.rules(规则)中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载)

rules对应的是一个数组，数组里面是一个一个的[rule](规则)对象

rule对象里面的属性：
　　test属性:用于对resource(资源)进行匹配的，通常会设置正则表达式；
　　use属性:对应的是数组[UseEntry]
　　　　UserEntry：对应的又是一个对象，可以通过对象的属性来设置一些其他属性
　　　　　　loader:必须有一个loader属性，对应的值是一个字符串
　　　　　　options:可选的属性，值是一个字符串或者对象，值会被传入到loader中；
　　　　　　query:目前已经使用options来替代
　　　　传递字符串(如：use:['style-loader'])是loader属性的简写方式如[{loader:'style-loader'}]

 module: {
    rules: [
      {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          {
            loader: 'css-loader'
          }

          //第一种的简写
          // "css-loader"
        ]
        // 第一种的简写，use只应用一个loader的时候
        // loader: 'css-loader'
      }
    ]
  }

style-loader

我们已经可以通过css-loader来加载css文件了
　　但是你会发现这个css在我们的代码中并没有生效(页面没有效果)

这是为什么呢？
　　因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中
　　如果我们希望再完成插入style的操作,那么我们还需要另外一个loader，就是style-laoder

安装style-laoder　　npm i style-loader -D

loader的处理顺序

  module: {
    rules: [
      {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  }

loader的处理顺序都是从后往前的

less-loader

如何对less文件进行转换？

less-loader依赖less工具进行转换

安装 npm i less less-loader -D

  module: {
    rules: [
      {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  }

浏览器的兼容性

开发中，浏览器对css特性、js语法之间的兼容性问题，我们应该如何去处理

市面上常见的浏览器：IE、Chrome、UC...，他们的市场占有率是多少，我们要不要兼容他们

其实在很多的脚手架配置中，都能看到类似于这样的配置

> 1%
last 2 versions
not dead

查看浏览器的市场占有率：Can I use... Support tables for HTML5, CSS3, etc https://caniuse.com

认识browserslist工具

给我们常用的工具进行共享的如babel,postcss-preset-env,autoprefixer

我们如何可以在css兼容和js兼容性下共享我们配置的兼容性条件？

如:>1% 　　意思是css和js要兼容市场占有率大于1%的浏览器
我们是通过工具来达到这种兼容性的，如babel,postcss-preset-env,autoprefixer

如何让他们共享我们的配置呢？
答案就是Browserslist

Browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置

babel,postcss-preset-env,autoprefixer等，这些工具，都要通过Browserslist查询到的浏览器，转化成什么样的结果

Browserlist编写规则一：

defaults:Browserslist的默认浏览器(>0.5%, last 2 versions, Firefox ESR, not dead)

5%：通过全局使用情况统计信息选择的浏览器版本。>=，<和<=工作

浏览器查询过程

我们可以编写类似于这样的配置：

标签：基本,文件,webpack,loader,WebPack,build,使用,js,css
来源： https://www.cnblogs.com/Mr-Hou88888/p/16124560.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9