Webpack配置

一枪穿云
104 阅读4分钟

WebPack的配置

基本配置

    //Webpack不是基于浏览器 使用 comomjs导入文件
    cosnt path = require('path')
    // 导出方式原理 同上
    module.exports={
        mode:'',//'node'|'development'| 'production'
        //配置入文件 (使用webpack打包的文件)
        entry:'./src/main.js',
        //出口文件(打包完成后的位置)
        output:{
            //路径 基于node打包要写node可以看懂的代码,路径要写成绝对路径 在node中__dirname代表当前路径 path.resolve()可以拼接路径放回一个绝对路径
            path:path.resolve(__dirname,'./build'),
            filename:'打包好的文件名.js'
        }
    }

source-map配置(来源映射)

  • 在开发过程中我们的代码运行在浏览器上的代码和真实代码是存在差异的

  • 我们可以通过设置devtool的值来实现代码映射

        //在module.exports 中加上devtool
    module.exports = {
        mode:'development',
        devtool:'source-map',   //dev开发 tool工具 学好英文的重要性
        entry:'./src/main.js',
        output:{
        path:path.resolve(__dirname,'./build'),
        filename:'打包好的文件名.js'
        }
    }
    • source-map文件解析
        {
        "version": 3, //版本号
        "file": "main.js", //文件名字
        //mappings 这个是核心 采用base64 VLQ(variable length quantity) 的编码格式
        "mappings": ";;;;;AAAA;AACA;AACA;AACA;AACA;AACA,qB",
        //来源 (原文件)位置
        "sources": [
            "webpack://d01/./src/mian.js"
        ],
        //源代码 (原代码内容)
        "sourcesContent": [
            "function  add( a , b) {\r\n    return a + b\r\n}\r\n\r\nconsole.log('hellowebpack')\r\nconsole.log(add(5,3))"
        ],
        //原来变量名称
        "names": [],
        //来源根目录
        "sourceRoot": ""
    }

Babel

Babel的预设(preset)

 * 预设的安装 npm install @babel/preset-env -D
 * babel在webpack中的配置
    在module中的rules配置解析文件和过程test目标文件

Babel的底层原理

 * Babel拥有编译器的工作流程
   * 解析阶段(parsing)
   * 转换阶段(Transformation)
   * 生成阶段(Code Generation)
 * Babel编译流程
   * 原生源代码 --> 词法分析 ---> tokens数组 ---> 语法分析 --> AST抽象语法树--->遍历---> 访问 ---> 应用插件(比如说const 转 var) ---> 新的AST抽象语法树 ---> 目标源代码

浏览器的兼容性

  • 浏览器内核在向Blink靠拢
  • .browserslistrc文件(browserslist工具)
    • >0.1% 市场占有率
    • last 2 versions 最后两个版本
    • not dead 还没有停止维护
  • 在presets中设置targets来覆盖browserslistrc文件中的配置(在开发中一般不这样配置因为browserslistrc中的配置可以在多个工具共享兼容性)

Babel抽取

  • 我们可以将Babel的配置抽取出去
     use:{
                 loader:'babel-loader',
                 options:{
                     presets:[
                         "@babel/preset-env"
                     ]
                 }
         }

* Babel的配置抽取为独立文件 可以通过新建下面这两种文件类型来
  * babel.config.json( 或.js、.cjs、.mjs文件 ) 
  * babelrc.json(或babelrc.js、cjs、mjs文件 )

polyfill(补丁)

* 因为 babel只能解决代码的降级但不能实现如Promise()这些类polyfill就是通过打补丁来实现这写API
* 安装core-js regenerator-runtime 在polyfill@7.40之前可以自己安装polyfill,7.40之后通过安装core-js和 regenerator-runtime
    * npm install core-js regenerator-runtime
* 指定版本
    corejs:3,
    useBuiltins:false|usage|entry
    1.参数false:不进行填充
      * 打包后的文件不适用polyfill来适配;
      * 并且这个时候是不需要设置corejs属性的
    2.参数usage:自动查看API
      * 会根据源代码中出现的语言特性,自动检测所需要的polyfill
      * 这样可以确保最终包里的polyfill数量的最小化,打出来的包也会相对小一些
      * 可以设置corejs属性来确定corejs的版本
    3.entry:根据入口来引入
      *  如果我们依赖的某一个库本身使用了某些polyfill的特性,但是因为我们使用的是usage,所以之后用户浏览器可能会报错;
      *  所以,如果你担心出现这种情况,可以使用entry
      *  并且需要在入口文件中添加`import 'core-js/stable';import 'regenerator-runtime/runtime'`
      * 这样做会根据browserslist目标导入所有的polyfill,但是对应的包也会变大

Webpack打包reatc代码配置

1.安装react
  * npm install react react-dom 
2.编写react代码

      import React,{memo,useState} from 'react'
      const [count,setCount] = useState(0)
      const App = memo(()=>{
        return {
          <div>
            <h1>洛阳纸贵:{count}</h1>
            <button onClick={ e=> setCount(count + 1)}>+1</button>
          </div>
        }
      })
      export default App

* 上面的React组件还没有使用,需要在打包文件(main.js)中引入改组件才可以使用

    //导入react和reactDom
    import React from 'react'
    import ReactDom from 'react-dom/client'
    //引入改组件加后缀(如果没有设置读取自定义后缀)
    import App from './react/App'
    //创建根CreateRoot用来渲染组件render
    //ReactDom.reateRoot()方法类似于Vue的createApp()方法
    //都需要传入一个根元素
    const root = ReactDom.reateRoot('#app')
    root.render(<APP/>)

3.安装配置模板页面的插件(就是安装创建html页面的插件)——>htmlwebpackplugin

  • 安装插件 npm install html-webpack-plugin -D (仅开发时使用)
  • 配置 在webpack.config.js文件中modeule(模块)中配置plugins(插件)!!!注意plugins小写
     //引入HtmlWebackplugin插件
     const htmlwebpackplugin = require('html-webpack-plugin') 
     module.exports = {

        module:{
          //new htmlwebpackplugin()需要传入一个html模板
          plugins:[ new htmlwebpackplugin({
            template:'./index.html'
          })
          ]
        }
     }

4.webpack解析jsx语法(syntax)

  • 在babel中可以解析JSX语法,可以在module(模板)对象的rules(规则)数组中配置解析JSX的方法,test(测试)写上解析的代码(正则)use(使用)什么配置loder加载器
    module.exports = {
      module:{
        rules:[
          test:'/\.jsx$/',
          use:{ loader:'babel-loader' },
        ]
      }
    }
  • 方案一:安装3个插件实现解析react代码通过npm安装在use中使用这些插件就可以了
    • npm install @babel/plugin-syntax-jsx @babel/plugin-tranfrom-react-jsx @babel/plugin-tranfrom-react-display-name
  • 方案二:由于引入的插件过多我们可以直接用预设preset
    • npm install @babel/preset-react -D
    • 配置preset-react
    module.exports = {
       module:{
        rules:[
          {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            [ "@babel/preset-env"],
                        ] 
                    }
                }
          },
          {
                test:/\.jsx$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            ["@babel/preset-react"]
                        ] 
                    }
                }
          },
        ]
      }
    }
  • 这时打包是会报错的因为在入口文件中
    root.render(<App />)
  • 是jsx代码jsx代码是可以写在js文件上的,我们可以将处理jsx的preset也写在js里就可以
  • 都这样了直接将js和jsx两个处理文件的options配置写在一起就可以了
     module.exports = {
       module:{
        rules:[
          {
                // test里面是正则表达式 ?表示 0 和 1
                test:/\.jsx?$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            [ "@babel/preset-env"],
                            ["@babel/preset-react"]
                        ] 
                    }
                }
          },
        ]
      }
    }
avatar
文章
阅读
粉丝