【vue3学习（一）】webpack

webpack

安装

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

webpack命令依赖webpack-cli,webpack-cli依赖webpack包来打包

打包

项目目录下执行webpack，会生成dist，存放main.js，就是打包之后的文件

当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口,没有src/index.js文件，那么会报错
修改入口和输出
npx webpack --entry ./src/main.js --output-path ./build
npx:指定node_modules/.bin下的webpack,也就是局部安装的那个

# 打包流程，先要创建package.json文件，用于管理项目的信息、库依赖等
npm init
npm install webpack webpack-cli -D
npm run build

webpack配置文件

默认文件名：webpack.config.js
指定配置文件：webpack --config wk.config.js （可以修改在package.json的scripts，写入进去更方便）

webpack打包的loader

一些语言、文件（css）的编译打包需要loader的”翻译“作用
使用loader最推荐配置在webpack.config.js里

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,  //正则表达式
        // loader: "css-loader"   //简写语法糖
        use: [
          "style-loader",
          "css-loader",  //简写
          "postcss-loader"
          //完整写postcss-loader
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     postcssOptions: {
          //       plugins: [
          //         require("autoprefixer")
          //       ]
          //     }
          //   }
          // }
          // {
          //   loader: "css-loader"
          // }
        ]
      },
      {
        test: /\.less$/i,     //i忽略大小写
        use: [
          "style-loader",
          "css-loader",  
          "less-loader"
        ]
      }
    ]
  }
}

• css-loader:将.css文件进行解析

• style-loader:将解析之后的css插入style

• less-loader:less->css

  • less文件处理(使用less)

    npm install less -D
    npx lessc ./src/css/title.less title.css
    

• postcss-loader

  • postcss和webpack的loader一样是有各种插件的工具
  • 直接使用是npm install postcss postcss-cli -D
  • 配置文件：postcss.config.js指定使用的插件
  • 插件autoprefixer：自动添加前缀style
    • npm install autoprefixer -D
    • npx postcss --use autoprefixer -o end.css ./src/css/style.css
      • .title {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }
  • 插件postcss-preset-env：postcss预设插件，转换现代css，变成大多数浏览器支持的，兼容了autoprefixer的功能

• file-loader：处理打包后的文件存储方式

  • 使用其placeholder，可以定义文件的扩展名、名称、加hash等
  • [ext]扩展名
  • [name]名称
  • [hash]、[hash:6]
  • [contenHash]和[hash]类似
  • [path]文件相当于webpack的路径

• url-loader：和file-loader用法一样，但是可以将小文件变成base64的URI

webpack5

5之前加载资源需要使用loader（raw-loader、file-loader、url-loader）
5开始可以直接使用资源模块类型(asset module type)

• asset/resource :file-loader
• asset/inline: url-loader
• asset/source：导出资源的源代码，raw-loader
• asset：在导出一个data URI和发送一个单独的文件之间自动选择，之前通过url-loader并配置资源体积限制实现。

plugin

打包优化、资源管理、环境变量注入
例如把css提取到文件中

• cleab-webpack-plugin:重新打包自动删除dist文件夹
• html-webpack-plugin:打包输出index.html
• DefinePlugin(webpack内置):定义变量
• copy-webpack-plugin:复制public目录下的文件到dist输出目录

mode

module.exports = {
  // 设置模式
  // development 开发阶段, 会设置development,代码不会压缩
  // production 准备打包上线的时候, 设置production
  mode: "development",
  // 设置source-map, 建立js映射文件, 方便调试代码和错误，否则默认是“eval”，不方便
  devtool: "source-map",
  
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js",
    // assetModuleFilename: "img/[name]_[hash:6][ext]"
  },
  module: {}
 }

babel

babel是一个工具链，类似webpack，可以单独使用，也可以配合webpack使用
包括语法转换、源代码转换

单独使用

npm install @bacel/core @bacel/cli -D
npx babel demo.js --out-file test.js(–out-dir test) --plugins=@bacel/plugin-transform-arrow-functions,@bacel/plugin-transform-block-scoping

插件介绍

安装方式 npm install @bacel/plugin-transform-arrow-functions -D

• @bacel/plugin-transform-arrow-functions
  箭头函数转函数
• @bacel/plugin-transform-block-scoping
  把let、const定义的块级作用域转化为es5的var

babel预设preset

集合常用的插件，一般开发直接使用预设就够了

使用预设

npm install @bacel/preset-env -D
npx babel demo.js --out-file test.js --presets=@bacel/preset-env

webpack结合babel

babel-loader

npm install @bacel/core babel-loader -D

使用：

{
	test: /\.js$/,
	use: {
		loader: "babel-loader",
		options: {
			//plugins: [
			//	"@bacel/plugin-transform-arrow-functions",
			//	"@bacel/plugin-transform-block-scoping"
			//]
			presets: [
				"@bacel/preset-env"
			]
		}
	}
}

跟postcss一样可以在配置文件里单独配置：

• babel.config.json(.js,.cjs,.mjs)
  早期使用较多的配置方式，对Monorepos项目比较麻烦

  //babel.config.js
  module.exports = {
    presets: [
      "@babel/preset-env"
    ]
  }
  

• .babelrc.json(.babelrc,.js,.cjs,.mjs)
  babel7，可以直接作用于Monorepos的子包，更加推荐

webpack-dev-server

npm install webpack-dev-server -D
可是在开发时实时编译刷新浏览器(使用这个，VSCODE可以不安装live-server)