webpack的使用和打包

概念

本 质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。

当 webpack 处理应用程序时，它会递归地构建一个 依 赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

一、webpack第一次安装和打包

安装

先确保你已经安装了nodejs, 接着新建一个项目目录如：

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

npm init  
//  初始化项目文件夹 会创建一个package.js

npm i webpack webpack-cli -D
//安装wewebpack 和 webpack-cli

生成以下文件

在根目录下在创建一个src文件，在此文件中创建header.js 和 index.js 

 header.js

var elem = document.createElement("div");//创建一个节点
elem.innerHTML = "你好，webpack";//设置内容
export default elem;//导出节点

index.js

import elem from "./header.js";//导入节点
document.body.appendChild(elem);//插入到页面

在命令提示符输入 npx webpack 进行打包

C:\myback>npx webpack
//输入完后根目录会生成一个dist文件，文件里会有一个main.js

在dist文件中新建一个index.html ，在body下方插入

<script src="./main.js"></script>

这样的话，在浏览器里打开index.html就会看到  你好，webpack  了。

二、使用配置文件

在项目目录 新建一个  webpack.config.js    webpack默认配置文件

module.exports = {
    // 指定文件的入口
    entry: "./src/index.js",
    //出口
    output: {
        // 定义文件名
        filename: "main.js",
        // 定义文件夹  // __dirname获取当前目录
        path: __dirname + "dist",
    },
    mode: "production", //产品模块
};
// module.export node中导出模块的意思

执行命令npx webpack实现打包，就不会出现第一次打包的警告了。

使用 webpack-dev-server 重启服务器进行更新

安装

npm i webpack-dev-server  html-webpack-plugin  -D

在根目录里创建一个public文件夹，在此文件夹中在建立一个index.html  

在 package.json 的 script 里的添加  "build": "webpack",  "serve": "webpack serve",例

"scripts": {
        "build": "webpack",
        "serve": "webpack serve",
        "test": "echo \"Error: no test specified\" && exit 1"
},

在  webpack.config 里导入插件 

//导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

实例化插件 

plugins: [
        // 实例化vue插件
        new HtmlWebpackPlugin({
            //指定模板
            template: "./public/index.html",
        }),
    ],

接着再添加

 devServer: {
        open: true, //打开浏览器
        host: "localhost", //本地域名
        port: 8080, //端口号
        hot: true, //热加载
    },

下面这是webpack.config 里的全部内容

//导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    // 指定文件的入口
    entry: "./src/index.js",
    //出口
    output: {
        // 定义文件名
        filename: "main.js",
        // 定义文件夹  // __dirname获取当前目录
        path: __dirname + "dist",
    },
    plugins: [
        // 实例化vue插件
        new HtmlWebpackPlugin({
            //指定模板
            template: "./public/index.html",
        }),
    ],
    mode: "production", //产品模块
    devServer: {
        open: true, //打开浏览器
        host: "localhost", //本地域名
        port: 8080, //端口号
        hot: true, //热加载
    },
};
// module.export node中导出模块的意思

启动：npm run serve     这样页面就显示出来了。 

补充知识

webpack核心概念   

entry //入口

//指定文件的入口
entry:{}

 output //输出

{
path:__dirname+"/dist",
filename:"main.js"
}

mode //模式 

 mode: "production", //产品模式 development

 loader  //加载器   

定义：让webpack拥有处理非js的文件

style-loader：把css插入到style标签
css-loader：加载css

安装：

npm i style-loader css-loader -D

 配置文件：

// 模块
	module:{
		// 规则
		rules:[
			{
			//测试.css文件结尾
			test:/\.css$/,
			// 使用两个loader加载器
			use:["style-loader","css-loader"],
			
			}
		]
	}

 plugins  插件

定义：处理内容外在webpack处理过程中额外操作，加载模板，压缩，服务器。。。。

安装：

npm i html-webpack-plugin 
//把html模板文件加载到dist目录，并插入打包好的js

配置 ：

const htmlWebpackPlugin = require("html-webpack-plugin")

plugins:[
    new htmlWebpackPlugin({
        template:"./public/index.html"
     })
]

安装：

npm i file-loader url-loader -D
//file-loader:加载文件
//url-loader：基于file-loader  如果文件比较小 转成base64格式 减少http请求的次数

npm i clean-webpack-plugin -D
//清理 dist 目录

 优化css插件：

npm i optimize-css-assets-webpack-plug -D

 在webpack.config.js 中导入

const optimizeCss = require('optimize-css-assets-webpack-plugin')

// 优化选项
	optimization: {
		// 压缩
	    minimizer: [ new optimizeCss()],
	}, 

如何单独抽出单独的  .css 文件

npm i mini-css-extract-plugin -D

在webpack.config.js 中导入

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

在 plugins 使用

 new MiniCssExtractPlugin({
            filename: "style-[hash:7].css",
        }),

css优化，js压缩优化：

npm i optimize-css-assets-webpack-plugin terser-webpack-plugin -D
//optimize-css-assets-webpack-plugin  css优化
//terser-webpack-plugin   js压缩优化

导入：
//导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");

下面这个是在module.exports里 不是在plugins 

使用：
// 优化选项
module.exports = {
    optimization: {
        minimizer: [new CssMinimizerPlugin(), new TerserWebpackPlugin()],
    },
}
 

 webpack优化

hash //哈希

内容相同，文件名称也就相同，如果浏览器已经请求过同样的名称，浏览器二次请求会从缓存里面取

hash  //打包的变化算出一段字符
contentHash //内容内容变化算出一段字符
chunkHash   //根据入口文件算出一段字符串

压缩

压缩css  optimize-css-assets-webpack-plug
压缩js    terser-webpack-plugin

分割 大文件拆分

optimization: {
		// 代码分割
		splitChunks: {
		    chunks: "all", 
		},
}