【 webpack 】基本使用

概念

前端工程化的具体解决方案
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

一、安装

• webpack
  npm install webpack
• webpack-cli
  npm install webpack-cli
• webpack-dev-server
  npm install webpack-dev-server

二、配置文件

根目录下创建 webpack.config.js

基本模块

module.exports ={
	mode:"xxx",   		// 模式
    entry: {},			// 入口
	output:{}, 			// 出口
	module: {},        // 文件的解析 loader 配置
  	plugins: [],       // 插件，根据需要配置各种插件
  	devServer: {}      // 配置 dev 服务功能
}

模式 ( mode )

• mode 指定构建模式
  • none
    • 日常学习使用
  • development(开发)
    • 执行时间较短 打包后的文件较大
  • production(上线)
    • 执行时间较长 打包后的文件较小

module.exports = {
	mode:"none 、 development 、production",
	entry:{}, 			// 入口
	output:{}, 			// 出口
	module: {},        // 文件的解析 loader 配置
  	plugins: [],       // 插件，根据需要配置各种插件
  	devServer: {}      // 配置 dev 服务功能
}

入口 ( entry )

指定要处理的文件

const path = require('path')
module.exports = {
	mode:"none 、 development 、production",
	
	// 设置单个入口文件
	entry: path.join(__dirname, './src/index.js'),  
	
	// 设置多个入口文件
    entry: {
        "button": "./src/button.js",
        "image": "./src/image.js"
    },	
    
	output:{}, 			// 出口
	module: {},        // 文件的解析 loader 配置
  	plugins: [],       // 插件，根据需要配置各种插件
  	devServer: {}      // 配置 dev 服务功能
}

出口 ( output )

指定打包的出口

const path = require('path')
module.exports = {
	mode:"none 、 development 、production",
	
	// 设置单个入口文件
	entry: path.join(__dirname, './src/index.js'),  
	// 设置多个入口文件
    entry: {
        button: "./src/button.js",
        image: "./src/image.js"
    },	
    
    // 出口 打包之后
	output:{
		// d单入口文件 常用bundle.js 
		filename:'bundle.js',
		// 多入口文件 会根据入口文件 生成与之对应的js文件 bundle.[contenthash].js
        filename: "[name].js",
        // 打包之后文件的位置
        path: path.resolve(__dirname, 'dist'),
	}, 			
	module: {},        // 文件的解析 loader 配置
  	plugins: [],       // 插件，根据需要配置各种插件
  	devServer: {}      // 配置 dev 服务功能
}

模块 ( loader )

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中

• 加载器在你的 webpack 配置中有两个属性：
  • 该test属性标识应该转换哪个或哪些文件
  • 该use属性指示应该使用哪个加载器来进行转换。

const path = require('path')
module.exports = {
	// 模块化 loader
    module: {
        rules: [
            // 模块化图片 开发环境下
            { test: /\.(png|jpg)$/, use: ['file-loader'] },

            // 模块化图片 生产环境下
            { 
				test: /\.(png|jpg)$/, 
				use: ['url-loader'],
				options:{
					// 小图片 转换为base64格式 设置路径 减少一次http请求
					// 大图 还是根据url设置路径
					// 文件大小限制 kb
					limit : 5 * 1024,
					// 将大图单独打包到img文件夹下
					outputPath:"/img/"
				}	
			},

            // 模块化css css-loader需要结合style-loader  处理兼容性问题postcss-loader
            { test: /\.css$/, use: ['style-loader', 'css-loader','postcss-loader'] },

            // 模块化css 实现css文件分离 需要与插件MiniCssExtractPlugin结合使用 
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },

            // 模块化sass
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

            // 模块化css 实现css文件分离 需要与插件MiniCssExtractPlugin结合使用 
            { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },

            // babel处理es6的语法 
            {	
                test: /\.js$/,
                // 排除node_modules下面的js文件
                exclude: /node_modules/,
                //  找到高版本的js时 进行转换 方便低版本的识别
                use: {
                    loader: "babel-loader",
  					// 配置babel
                    options: {
                        presets: ['@babel/env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            },
        ]
    },
}

配置babel

• 下载
  • npm install -D babel-loader @babel/core @babel/preset-env
  • babel-loader
    • 这个包允许使用Babel和webpack转译 JavaScript 文件
  • @babel/core
    • Babel 编译器核心
  • @babel/preset-env
    • 每个环境的 Babel 预设

配置.babelrc 文件

{
    "presets": [
        "@babel/env"
    ],
    "plugins": [
    	// 此插件转换静态类属性以及使用属性初始值设定项语法声明的属性
        "@babel/plugin-proposal-class-properties"
    ]
}

插件 ( plugins )

为了使用插件，您需要将require()其添加到plugins数组中
大多数插件都可以通过选项进行定制
在一个配置中多次使用一个插件用于不同的目的，需要通过使用new操作符调用它来创建它的一个实例

• 代码压缩
  • npm i terser-webpack-plugin --save-dev
• css代码分离
  • npm i mini-css-extract-plugin --save-dev
• 打包之前 清空dist文件夹 避免多次打包 生成重复文件
  • npm i clean-webpack-plugin --save-dev
• 自动生成html文件
  • npm i html-webpack-plugin --save-dev

const path = require('path');
// 引入插件
// 代码压缩
const TerserPlugin = require('terser-webpack-plugin');

// 实现css文件分离
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 打包之前 自动清空 打包文件夹下内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 自动生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	plugins: [
		// 使用插件
        // 代码压缩
        new TerserPlugin(),
        
        // css代码分离
        new MiniCssExtractPlugin({
            // 生成一个随机的名称 style.[contenthash].css
            filename: '[name].css'
        }),
        
        // 打包之前 清空dist文件夹 避免多次打包 生成重复文件
        new CleanWebpackPlugin({
        // 第一个参数 删除dist文件夹下的所有文件 
        // 第二个参数 删除dist文件夹外部的build文件下的所有内容
        cleanOnceBeforeBuildPatterns: [
        	'**/*', 
        	path.resolve(process.cwd(), 'build/**/*')]
        }),
        
        // 自动生成html文件
        new HtmlWebpackPlugin({
            title: 'button',
            filename: 'button.html',
            // 基于index.html模板
            template: 'index.html',
            // 设置引入指定的入口文件的数据
            chunks: ['button'],
            meta: {
                description: "button"
            }
        }),
        new HtmlWebpackPlugin({
            title: 'image',
            filename: 'image.html',
             // 基于index.html模板
            template: 'index.html',
            // 设置引入指定的入口文件的数据
            chunks: ['image'],
            meta: {
                description: "image"
            }
        })
    ]
}

优化第三方插件

webpack ---- 优化

• 例如 lodash

module.exports = {
	 optimization: {
        splitChunks: {
        	// all  对所有的同步 异步代码 都做分割
        	// async 异步 例如 import('xxxxx')
        	// initial 同步 例如 import xxx from "xxx"
            chunks: 'all',
            // 当引用的第三方插件  小于设置的值(3000 => 30kb) 也要自动打包成一个单独的文件
            minSize: 3000,
            cacheGroups:{
				// 第三方模块
				vendor:{
					// 模块名字
					name : "",
					// 优先级 越大的越先检测
					priority : 1,
					// 检测方法  例如 模块是否来自node_mod
					test : /node_modules/,
					// 设置大小 可以写成 xxx * 1024 代表 xxx kb
					minSize : 0,
					// 检测模块使用了几次
					// 第三方模块 引用1次 就单独打包
					// 公共模块 引用2次 就单独打包
					minChunks : 1
				}
				// 公共模块
				common:{
					// 模块名字
					name : "",
					// 优先级 越大的越先检测
					priority : 1,
					// 检测方法  例如 模块是否来自node_mod
					test : /node_modules/,
					// 设置大小 可以写成 xxx * 1024 代表 xxx kb
					minSize : 0,
					// 检测模块使用了几次
					// 第三方模块 引用1次 就单独打包
					// 公共模块 引用2次 就单独打包
					minChunks : 1
				}
			}
        }
    },
}

实时监控打包的插件

• webpack-dev-server
  • 类似 nodemon
  • 原始文件作出改动后，webpack-dev-server会实时的编译
  • 编译之后的文件会放在内存中
    • 所以引用的话就直接引用内存中的资源 <script src="/bundle.js"></script>
  • 在package.json里面设置script
    • 用于指定脚本命令 供npm直接调用

配置devServer

module.exports = { 
	devServer: {
	    contentBase: "./dist",
	    port: 8081,
	    open: true,
	    // 热替换
	    hotOnly: true, 
	    // 解决跨域（代理的原理）
	     proxy: {
            '/api': {
            	// 接口路径
                target: 'http://localhost:5050/',
                // 是否跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''  //路径重写 
                }
            }
        }
   	 },
  }
}

不同模式下的打包脚本设置

package.json
{
	"script":{
		// 生产模式下 npm run build
		"build": "webpack --config webpack.production.config.js",
    	
    	// 开发模式下  npm run dev
    	"dev": "webpack --config webpack.dev.config.js",
    	
    	// 安装了webpack-dev-server 执行 npm run serve
    	"serve": "webpack serve --config webpack.dev.config.js"
	}
}