深入webpack学习 devServer babel-loader asset

Posted 2021-12-18 lin-fighting

开发服务器

 //配置开发服务器
    devServer: 
      static: 
        //真实的含义：配置额外的静态文件的目录,相当于express的开放静态资源目录，可以从浏览器从http://localhost:8080/xx.jpg
        //就是来static文件中寻找的。
        //contentBase: path.resolve(__dirname, "static"),
        // static: ['static']
        directory: path.join(__dirname, "static"),
        publicPath: "/dist",
      ,
      compress: true, //启动压缩gzip
      port: 8080, //端口号
      open: true, //启动之后自动打开浏览器
      hot: true, //配置模块热更新
    ,

路径配置

类别	配置名称	描述
output	path	指定输出到硬盘上的目录
output	publicPath	表示的是打包生成后的index.html文件中引用资源（js）的前缀，也是公开的路劲,表示我们应该以什么路径访问打包后的静态文件。
devServer	static下的publicPath	表示我们应该以什么路劲访问static.directory。
output	static.directory(替代contentBase）	用于配置提供二外静态文件内容的目录（类似后端开放静态资源的目录，http://localhost:8080/xx.png就会来这个指定的目录寻找。）

相当于开启另一个静态服务，从浏览器访问的时候会先从dist目录下寻找，没有再去static目录下寻找。

这里可以通过localhost:8080/xx去访问static下的目录，默认值是’’。
配置static.publicPath



只能通过指定的路径去访问静态资源文件。

那output的publicPath又有什么用？

默认是’/’，表示公开的访问路劲。

这个配置表示我们只能以localhost:8080/static来访问打包后的文件。

为什么配置这个呢？
因为一般我们的css,js文件都是放在CDN上的，所以这个publicPath一般是来配置csdn的地址的。

总结：

output的path用来决定打包后的文件的位置。output的publicPath用来决定以什么路径访问打包后的文件。
devServer的static.directory用来开启另外的静态资源服务，而devServer的static.publicPath用来决定以什么路径访问这个另外的静态资源服务.
目前总的代码：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (env, args) => 
  const isProducetion = env.production;
  const isDevelopment = env.development;
  console.log(process.env.REACT_APP);
  return 
    //entry: './src/index.js',
    // 出口
    mode: "development",
    entry: 
      //可以是 main: [],//会一起打包。
      index: "./src/index.js", //源文件只能是源目录里面的文件。可以是相对路劲，也可以是绝对路劲。
    ,
    // 入口，
    output: 
      path: path.resolve(__dirname, "dist"), //必须是绝对路劲， 打包后输出的文件可以是硬盘的任意位置
      filename: "[name].js",
      publicPath: "/static", //
    ,

    //配置开发服务器
    devServer: 
      static: 
        //真实的含义：配置额外的静态文件的目录,相当于express的开放静态资源目录，可以从浏览器从http://localhost:8080/xx.jpg
        //就是来static文件中寻找的。
        //contentBase: path.resolve(__dirname, "static"),
        // static: ['static']
        directory: path.join(__dirname, "static"),
        publicPath: "/dist",
      ,
      compress: true, //启动压缩gzip
      port: 8080, //端口号
      open: true, //启动之后自动打开浏览器
    ,

    //处理js和json之外的文件，要想让webpack认识，必须配置Loader
    // loader加载器可以把webpack不认识的模块转换成webpack认识的模块
    module: 
      rules: [
        
          test: /\\.txt$/,
          use: ["raw-loader"],
        ,
      ],
    ,

    //插件
    plugins: [
      //在输出目录自动生成html文件，并插入打包后的脚本
      new HtmlWebpackPlugin(
        //模板
        template: "./src/index.html",
        filename: "index.html",
      ),
      //配置全局变量
      new webpack.DefinePlugin(
        "process.env.NODE_ENV1": JSON.stringify(
          isDevelopment ? "development" : "production"
        ),
        test: JSON.stringify(isDevelopment ? "development" : "production"),
      ),
    ],
  ;
;

打包其他资源

webpack5之后可以不使用url-loader,raw-loader,file-loader了。
可以使用配置：资源模块类型（asset module type）,它允许使用资源文件（字体，图片）等，而无需配置其他的loader。
有四种可选的值：

• 1 asset/resource 发送一个单独的文件并导出URL，替代file-loader
• 2asset/inline 导出一个资源的data URL，替代url-loader
• 3asset/source 导出资源的源代码，之前通过使用raw-loader实现。
• 4 asset在导出一个data URL和发送一个单独的文件之间做选择，之前通过url-loader+limit属性实现。
  具体使用：
  
  使用第三种，代替raw-loader
  使用assest/inline代替url-loader，可以把小图片变成base6字符串嵌套在页面中。
  
  
  使用asset/resource代替file-loader。打包出

使用generator可以配置额外的信息，比生成文件的位置。
使用：asset,来代替url-loader+limit的效果：

将大于10kb的文件打包出去，小于10kb转成base64的字符串。

引入图片的几种方式

• 1 require(’./xxx.jpg’)
• 2 使用css backgound-image: url(’./xxx.jpx’)
• 3 import style from ‘./xx.jpg’
• 4 直接在img标签使用(在html中使用的时候需要html-loader)
  
  
  

总结：

webpack5使用asset module type来打包其他的资源，一共有四种：
asset/inline(url-loader) 将资源转换城64位字符串嵌入页面
asset/resource(file-loader) 将资源额外打爆出来
asset/source(raw-loader) 将资源的源代码直接导出，嵌入页面
asset(url-loader+limit)将大于最大值的资源额外打包，将小的资源转成64位字符串嵌入页面
他们都可以通过额外的配置比如打包后的文件名，位置等等。

babel-loader

es6,es7，甚至更高的代码无法在浏览器正常运行，所以需要转化成es5的代码，babel就是来做这个事情的。
下面是使用babel转化代码的三个核心：

• babel-loader //可以让webpack认识的
• @babel/core // babel的核心代码
• @babel/preset-env //告诉babel怎么转化。
• 三者的关系可以抽象为，babel-loader就是一个厨房重地，而@babel/core是转换代码的引擎，把它比喻成厨师。而@babe/preset-env预设就好比菜谱。如果没有厨房，厨师有了菜谱也不能做菜。没有菜谱，厨师在厨房内也无法做菜，只能做一些简单的菜式（转换一些简单的代码）。没有厨师更加无法做菜了（无法转换代码），所以三者缺一不可。

用伪代码表示就是：

function BabelLoader(soruceCode) //babelloader就是babel-loader
					//babelCode就是@babel/core,转换器
		let targetSource = babelCore.transform(sourceCode,  presets: ['@babel/preset-env'])  //预设
		return targetSource

所有的webpack loader本质就是一个函数，用于接受原来的内容，返回新的内容。
预设有很多种，就好比有很多种菜谱，有支持转换react的，有支持转换装饰器的，有支持转换vue的等等。

babel-profill

eslint

使用vscode的内置插件
安装


在根目录下创建.vscode文件夹，再创建settings.json文件。
里面用来存放Vscode的配置规则。

    //eslint的配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
    ],
    //文件的保存默认保存格式
    "[typescriptreact]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,
    "[typescript]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,
    "[javascript]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,
    "[javascriptreact]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,
    //css的验证开启
    "css.validate": true,
    "less.validate": true,
    "scss.validate": true,

    //保存格式化
    "editor.formatOnSave": true,
    //在保存时运行的代码操作类型。
    "editor.codeActionsOnSave": 
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    
   

像这样配置完毕，当我们代码自动保存的时候就会自动格式化了。

这是vscode对代码格式的防线

eslint-loader对代码的防线

在webpack里面，loader是有类别的，分为

• pre 前置
• normal 正常
• inline 内联
• post 后置
  先走pre，再normal，再inline，再post
  cnpm i eslint eslint-loader babel-eslint -D
  
  新建一个.eslintrc.js文件
  
  这样在我们有不合规范的代码的时候就会报错。这是代码检查的另一道防线，与vscode的无关。