webpack打包用法

webpack基础

安装和配置webpack

安装 webpack: npm install webpack webpack-cli -D

创建一个 webpack.config.js 并进行配置

module.exports = {
      
      
    mode:"development" // development(开发模式),production(发布模式)
}

修改项目中的package.json文件并添加运行脚本dev

"scripts":{
      
      
	"dev":"webpack"
}

运行dev命令进行项目打包: npm run dev
在页面中引入项目打包后自动生成的dist文件夹中的js文件
```
<script src="../main.js"></script>
```

设置webpack的入口和出口

webpack 的4.x版本中约定：

打包的入口文件为 src -> index.js
打包的输出文件为dist -> main.js

若要修改打包的入口与出口，可通过 webpack.config.js 修改配置信息：

这里引入了path模块，是为了方便路径操作

const path = require("path");
module.exports = {
    
    
	mode:"development",
	// 入口文件路径
	entry: path.join(__dirname, "./src/xx.js"),
	// 出口文件
	output: {
    
    
		// 路径
		path:path.join(__dirname, "./dist"),
		// 文件名
		filename: "xx.js"
	}
}

完成如上修改后，重新执行 npm run dev 后，dist文件夹会新增一个xx.js文件

设置webpack自动打包

安装自动打包功能的包： webpack-dev-server

npm install webpack-dev-server -D

修改 package.json 中的dev指令：

"scripts"：{
      
      
	"dev":"webpack-dev-server"
}

运行 npm run dev 进行打包
输入网址：http://localhost:8080

自动打开默认预览页面

安装默认预览功能的包：html-webpack-plugin

npm install html-webpack-plugin -D

修改 webpack.config.js 文件：

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
      
      
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
})

继续修改 webpack.config.js 文件，添加 plugins 信息：

module.exports = {
      
      
    plugins:[ htmlPlugin ]
}

更改 package.json 文件，修改dev命令
```
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
```
open指执行命令后自动打开页面，host指IP地址，port指端口号

webpack加载器

通过loader打包非js文件

打包处理css文件

安装处理css文件的loader，运行 npm i style-loader css-loader -D

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

// 所有第三方文件模块的匹配规则
module: {
      
      
	rules: [
		{
      
      test: /\.css$/， use: ['style-loader', 'css-loader']}
	]
}

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

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

打包处理less文件

运行 npm i less-loader less -D

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

// 所有第三方文件模块的匹配规则
module: {
      
      
	rules: [
		{
      
      test: /\.less$/， use: ['style-loader', 'css-loader','less-loader']}
	]
}

打包处理scss文件

运行 npm i sass-loader node-sass -D

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

// 所有第三方文件模块的匹配规则
module: {
      
      
	rules: [
		{
      
      test: /\.scss$/， use: ['style-loader', 'css-loader','sass-loader']}
	]
}

配置postCSS自动添加css的兼容前缀

各个浏览器对css的兼容不同，所以打包时需要配置postCSS

运行 npm i postcss-loader autoprefixer -D

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

const autoprefixer = require('autoprefixer');
module.exports = {
      
      
	plugins: [autoprefixer]
}

在 webpack.config.js 的module -> rules 数组中，修改css的loader规则：

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

打包样式表中的图片和字体文件

运行 npm i url-loader file-loader -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则：
```
module: {
	rules: [
		{
			test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
			use: 'url-loader?limit=xxxxx'
		}
	]
}
```
其中 ? 后是 loader 的参数项

limit 用来指定图片大小，单位是字节，小于limit大小的图片，才会被转为base64图片

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

安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在项目根目录中，创建babel配置文件 babel.config.js 并初始化基本配置：

module.exports = {
      
      
	presets: ['@babel/preset-env'],
	plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

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

exclude 为排除项，表示 babel-loader 不需要处理 node_modules中的js文件

module: {
      
      
	rules: [
		{
      
      
			test: /\.js$/, use: 'babel-loader', exclude: /node_modules/
		}
	]
}

webpack打包发布

上线前需先通过 webpack 将应用整体进行打包，可通过 package.json 文件配置打包命令：

该命令默认加载项目根目录中的 webpack.config.js 配置文件

"scripts": {
    
    
	// 用于打包的命令
	"build": "webpack -p"
}

webpack基础

安装和配置webpack

设置webpack的入口和出口

设置webpack自动打包

自动打开默认预览页面

webpack加载器

通过loader打包非js文件

打包处理css文件

打包处理less文件

打包处理scss文件

配置postCSS自动添加css的兼容前缀

打包样式表中的图片和字体文件

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

webpack打包发布

猜你喜欢