webpack基础 | 8月更文挑战

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

简介

官网：nodejs.org/en/

Webpack是一个JavaScript应用程序的静态模块打包器（module bundler）,当webpack处理应用程序时，它会递归的构建一个依赖关系图，当包含的应用程序需要的每个模块，然后将所有这些模块打包成一个bundle.js或者多个。webpack是一个模块化打包工具，他会从入口模块出发，识别出源码钟模块化导入的语句，并找出入口文件中所有依赖，最后打包到一个单独的文件中。

环境搭建

// 安装方式
npm init -y// 初始化npm配置⽂件npm install --save-dev webpack // 安装核⼼库npm install --save-dev webpack-cli // 安装命令⾏⼯具// 安装最新的4.x稳定版本
npm i -D webpack@4.44.0
// 安装指定版本
npm i -D webpack@
// 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g
// 检查版本
webpack -v
// 卸载
npm uninstall webpack webpack-cli -g
复制代码

注：不推荐全局安装，因为全局安装，会把项目中的webpack指定一个固定版本，会影响其他项目的使用，冲突构建失败

实际运用

1、创建index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
2、创建index.json
{
 "name": "JOSN"
}
3、创建other.js
export function add(n1, n2) {
 return n1 + n2;
}
4、执行构建
npm run test
5、修改package.json文件
"scripts": {
 "test": "webpack"
},
//注：原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接。
6、构建成功后会多出⼀个dist⽬录，里面有一个main.js，这个文件是一个可执行的js文件，包含webpackBootstrao启动函数等
7、默认配置
const path = require("path");
module.exports = {
     // 必填 webpack执⾏构建⼊⼝
     entry: "./src/index.js",
     output: {
         // 将所有依赖的模块合并输出到main.js
         filename: "main.js",
         // 输出⽂件的存放路径，必须是绝对路径
         path: path.resolve(__dirname, "./dist")
     }
};
复制代码

webpack配置概念

//整体配置
module.exports = {
     entry: "./src/index.js", //打包⼊⼝⽂件
     output: "./dist", //输出结构
     mode: "production", //打包环境，production、development、nonee可以⾃动触发webpack内置的函数，达到优化的效果
     module: {
         rules: [//loader模块处理
             {
                 test: /\.css$/,
                 use: "style-loader"
             }
         ]
     },
     plugins: [new HtmlWebpackPlugin()] //插件配置
};
//mode:开发阶段的开启会有利于热更新的处理，识别哪个模块变化、⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能
复制代码

chunk: 一个chunk由多个模块组合而成，也用于代码合并和分割

bundle：编译后生成的核心打包文件。

entry：指定打包的入口文件，用来告诉webpack用哪个文件作为构建依赖的起点，每个依赖都会被它递归处理，最终输出到打包结果中。

//单⼊⼝ SPA，本质是个字符串
entry:{
 main: './src/index.js'
}
//支持简写
entry:"./src/index.js"
//多⼊⼝ entry是个对象
entry:{
 index:"./src/index.js",
 login:"./src/login.js"
}
复制代码

output：配置描述了webpack打包的输出配置，包含输出文件名配置，位置等

output: {
     filename: "bundle.js",//输出⽂件的名称
     path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},
//多⼊⼝的处理
output: {
     filename: "[name][chunkhash:8].js",//利⽤占位符，⽂件名称不要重复
     path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},
复制代码

loder：模块解析，通过loader解析更多类型的文件，把模块原内容按照需求转换成新内容

//常用loader
style-loader、css-loader、less-loader、sass-loader、ts-loader //将Ts转换成js、
babel-loader//转换ES6、7等js新特性语法
file-loader//处理图⽚⼦图
eslint-loader
……
复制代码

plugin：控制构建流程，从而执行一些特殊任务，⽤于整个构建过程。

        htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html 中。 

npm install –save-dev html-webpack-plugin

        clean-webpack-plugin

cleanOnceBeforeBuildPatterns: ["/*", "!dll", "!dll/"],
！感叹号相当于exclude 排除，意思是清空操作排除dll⽬录，和dll⽬录下所有⽂件。
注意：数组列表⾥的“*/”是默认值，不可忽略，否则不做清空操作。
复制代码

        ……

注：从4.0开始webpack支持零配置，虽然是这样，还是要自己配置，同时加入mode的概念，用于指定打包的目标环境，以便在打包的过程中启用webpack针对不同的环境下内置的优化。

最后交一个脑图