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指定一个固定版本，会影响其余项目的使用，冲突构建失败

实际运用

一、建立index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
二、建立index.json
{
 "name": "JOSN"
}
三、建立other.js
export function add(n1, n2) {
 return n1 + n2;
}
四、执行构建
npm run test
五、修改package.json文件
"scripts": {
 "test": "webpack"
},
//注：原理就是经过shell脚本在node_modules/.bin⽬录下建立⼀个软连接。
六、构建成功后会多出⼀个dist⽬录，里面有一个main.js，这个文件是一个可执行的js文件，包含webpackBootstrao启动函数等
七、默认配置
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//转换ES六、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针对不一样的环境下内置的优化。

最后交一个脑图