Webpack

webpack

webpack的安装

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

webpack的配置

在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化

module.exports = {
  mode: 'development' //mode用来执行构建模式，可选值有development 和 production
}						//开发用development速度快 上线用production体积更小

在package.json的script节点下，新增dev脚本

 "scripts": {
    "dev": "webpack" //script 节点下的脚本，可以通过npm run执行
  }

在终端执行npm run dev命令，启动webpack进行项目的打包构建

注：

在webpack 4.x和 5.x的版本中

默认的打包入口文件为scr -> index.js
默认的输出文件路径为dist -> main.js

修改默认配置

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径 （指定处理哪个文件）
  output: {										//__dirname为当前配置文件所在目录
    path: path.join(__dirname, './dist'), 		//输出文件的存放路径
    filename: 'bundle.js' 						//输出文件的名称
  }
}

webpack插件

第三方插件对webpack功能进行拓展

webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

webpack-dev-server会启动一个实时打包的http服务器

类似于nodemon 每次修改源代码，webpack会自动进行项目的打包和构建，生成的bundle.js不在磁盘空间中，在内存中

在package.json的脚本中修改dev命令

 "scripts": {
    "dev": "webpack serve" //script 节点下的脚本，可以通过npm run执行
  }

html-webpack-plugin

webpack中的html插件，可以定制index.html页面的内容

npm install html-webpack-plugin@5.3.2 -D

通过html插件复制到项目根目录下的index.html页面，也放在了内存中，html插件在生成的index.html页面，会自动注入打包的bundle.js文件

devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置

devServer: {
  open: true,         //初次打包完成后，自动打开浏览器
  host: '127.0.0.1',  //实时打包所使用的主机地址
  port: 80,            //实机打包所使用的端口号
}

loader

webpack默认只能打包处理.js结尾的文件，处理不了其他后缀文件

当webpack发现某个文件处理不了时，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器

webpack会把index.css这个文件先转交给最后一个loader进行处理(css-loader)

当css-loader处理完毕后，会把处理的结果，转交给下一个loader(style-loader)

当style-loader处理完毕后，发现没有下一个loader就把处理的结果转交给webpack

webpack吧style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件

打包处理css文件

npm i style-loader@5.2.6 -D

在webpack.config.js的module ->rules数组中 添加loader规则

module: {
  rules: [
    { test: /\.css$/, use: ['style-loader', 'css-loader']},
  ]
}

test表示匹配的文件类型，use表示对应要调用的loader

use数组中的指定的loader顺序是固定的

多个loader的调用顺序是：从后往前调用

打包处理less文件

npm i less-loader@10.0.1 less@4.1.1 -D 

在webpack.config.js中的module ->rules数组中，添加loader

module: {
  rules: [
    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
  ]
}

打包处理样式表中的与url路径相关的文件

npm i url-loader@4.1.1 file-loader@6.2.0 -D 

在webpack.config.js中的module ->rules数组中，添加loader

module: {
  rules: [
    { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'},
  ]
}

?之后的是loader的参数项

limit用来指定图片的大小，单位是字节（byte）

只有<=limit 大小的图片，才会转为base64格式的图片

打包处理js文件中的高级语法

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在webpack.config.js中的module ->rules数组中，添加loader

module: {
  rules: [ //注意：必须使用exclude指定排除项，因为node_modules 目录下的第三方包不需要被打包
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  ]
}

配置babel-loader

在项目根目录下，创建名为babel.config.js的配置文件，定义babel的配置项

module.exports = {
//声明babel可用的插件
plugins: [['@babel/plugin-proposal-decorators', { legacy: true}]]
}

打包发布

在package.json文件的script节点下，新增build命令

 "scripts": {
    "dev": "webpack serve" //script 节点下的脚本，可以通过npm run执行
    "build": "webpack --mode production"  //项目发布时，运行build命令
  }

–mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化

通过–mode执行的参数项会覆盖webpack.config.js中的mode选项

把javascript文件统一生成到js目录下

修改下配置中的生成文件路径即可

 output: {										//__dirname为当前配置文件所在目录
    path: path.join(__dirname, './dist'), 		//输出文件的存放路径
    filename: 'js/bundle.js' 						//输出文件的名称
  }

把图片文件统一生成到image目录下

修改webpack.config.js中的url-loader配置项，新增outputPath选项修改输出路径

module: {
  rules: [
    { test: /\.jpg|png|gif$/, 
      use: {
        loader:'url-loader',
        options: {
          limit:22229,
          outputPath: 'image'
        }
    }},
  ]
}

//或

module: {
  rules: [
    { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=image'},
  ]
}

clean-webpack-plugin

自动清理dist目录下的旧文件

安装清理dist目录的webpack插件

npm install clean-webpack-plugin@3.0.0 -D

导入创建实例对象并挂载到plugin节点中

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

plugin: [htmlPlugin, cleanPlugin]

Source Map

Source Map是一个信息文件，存储着位置信息Source Map文件中存储着压缩混淆后的代码所对应的转换前的位置

配置后除错工具会直接显示源码，不是转换后的代码

在webpack.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致

module.exports = {
	devtool: 'eval-source-map' //可以追溯到源代码
}

devtool: 'nosources-source-map'//不可以追溯到源代码

在开发环境下建议吧devtool的值设置为eval-source-map 可以定位到具体的错误行

生产环境下建议关闭Source Map或将devtool的值设置为nosources-source-map可以防止源码泄露

@

在webpack中不能使用@文件路径，需要手动配置

在webpack.config.js中添加如下配置

reslove: {
	alias: {
		//告诉webpack@符号代表src这一层目录
		'@': path.join(__dirname, './src/')
	}
}