Webpack安装及配置

webpack

安装

-D： --save-dev的简写，安装到开发依赖，不会被打包
-S： --save的简写，安装到生产依赖，会被打包

介绍

webpack本质是 一个Node.js 第三方模块包, 用于分析, 并打包代码

好处

减少文件数量，体积，提高（网站）加载速度

准备环境

npm init   // 初使话环境  
npm i webpack webpack-cli -D  // 安装包依赖  
在package.JSON  中 配置scripts(自定义打包命令)
		"自定义命令": "webpack"

入口和出口

新建webpack.config.js (webpack默认配置文件名)
通过entry设置入口文件路径
通过output对象设置出口路径和文件名
	module.exports = {
        entry: '.../main.js',
        output:{
            path: path.resolve (__dirname, 'dist'),
            filename: '打包后的文件名.js'
        }
    }
注意: webpack基于node, 所以导出, 遵守CommonJS规范
01、如果没有webpack.config.js配置打包出口目录和文件名；打包后默认生成dist和main.js
02、所有要被打包的资源都要跟入口产生直接/间接的引用关系

打包

<!--执行webpack命令 ->  找到配置文件  ->  分析入口和依赖关系 -> 打包代码 并 输出到指定位置

配置 Mode

production: 生产模式。代码得到极致压缩
development: 开发模式，代码不压缩
注意：默认情况下，webpack会开启生产模式打包，  代码会得到极致的压缩

插件

npm i html-webpack-plugin -D

可以自动生成html文件并且引入打包后的js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口
	entry: './src/main.js',
  // 出口 = 目录名 + 文件名
  output: {
    path: path.resolve(__dirname, 'dist')
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './pubic/index.html'
    })
  ]
}

加载器

webpack默认只能处理js、json文件，需要借助于loader加载器解析.css/,less/图片/src等资源

CSS

​ 下载

npm i css-loader  style-loader -D

​ 配置

rules: [
	{
		test: /\.css$/i,
		use: ['style-loader', 'css-loader']
	}
]
css-loader：  让webpack能处理css类型文件
style-loader：把css插入到head下style标签内

Less

​ 下载

npm i less less-loader -D

​ 配置

rules: [
	{
		test: /\.less$/i,
		use: ['style-loader', 'css-loader', 'less-loader']
	}
]
less-loader  识别less文件；
less作用: 将less编译为css

图片

rules: [
	{
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset",
        generator: {
          filename: "images/[hash:20][ext]",  // 随机生成20位不重复的字符串
        },
    },
]
无需下载loader，借助`type: 'asset'`
超过8KB：直接打包输出到dist目录下，文件名是个随机字符串（保证不会出现重名文件）
不超过8KB：转成base64格式，打包到js中

字体图标

rules: [
      {
        test: /\.(eot|svg|ttf|woff2?)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name].[hash:6][ext]'
        }
      }
]
无需下载loader，借助`type: 'asset/resource'`
指定打包输出的目录名：`generator: {filename: 'font/[name].[hash:6][ext]'}`

降级

npm i babel-loader @babel/core @babel/preset-env -D

babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法
babel-loader: 可以让webpack转译打包的js代码

开发服务器

npm i webpack-dev-server -D

scripts": {
	"serve": "webpack serve"
}

在package 中的scriptes 配置
yarn serve 或 npm run serve 运行

开发服务配置端口

devServer: {
	port: 3000,
	open: true
}

在 webpack.config.js  中配置

感谢观看如有补充还得大佬们的私信~