webpack配置核心概念

• 清楚理理解和掌握webpack的配置、概念

文档

• 官方网站：https://webpack.js.org/

 

1.webpack简介

webpack is a module bundler(模块打包工具)
Webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，
识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入
口和其所有的依赖打包到一个单独的文件中
是工程化、自动化思想在前端开发中的体现

 

2.安装webpack
 

2.1-环境准备

nodeJs https://nodejs.org/en/

版本参考官网发布的最新版本，可以提升webpack的打包速度

2.2-全局安装 不推荐

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g

# 检查版本
webpack -v

# 卸载
npm uninstall webpack webpack-cli -g

全局安装webpack，这会将你项目中的webpack锁定到指定版本，造成不
同的项目中因为webpack依赖不同版本而导致冲突，构建失败

 

2.3-项目安装 推荐

# 安装最新的稳定版本
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新的体验版本 可能包含bug,不要用于生产环境
npm i -D webpack@beta

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

 

2.4-检查安装

webpack -v    //command not found 默认在全局环境中查找
npx webpack -v   // npx帮助我们在项目中的node_modules里查找webpack
./node_modules/.bin/webpack -v   //到当前的node_modules模块里指定webpack

3.启动webpack执行构建

3.1- webpack默认配置

• webpack默认支持JS模块和JSON模块
• 支持CommonJS Es moudule AMD等模块类型
• webpack4支持零配置使用,但是很弱，稍微复杂些的场景都需要额外扩展

3.2- 准备执行构建

• 新建src文件夹
• 新建src/index.js、src/index.json、src/other.js

### 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;
}

3.3- 执行构建

# npx方式
npx webpack

# npm script
npm run test

修改package.json文件：

"scripts": {
    "test": "webpack"
},

原理理就是通过shell脚本在node_modules/.bin目录下创建一个软链接。

3.4-构建成功

我们会发现目录下多出一个 dist 目录，里面有个 main.js ，这个文件是一个可执行的JavaScript文件，里面包含webpackBootstrap启动函数。

3.5-默认配置

const path = require("path");
module.exports = {
    // 必填 webpack执⾏行行构建⼊入⼝口
    entry: "./src/index.js",
    output: {
// 将所有依赖的模块合并输出到main.js
filename: "main.js",
// 输出⽂文件的存放路路径，必须是绝对路路径
path: path.resolve(__dirname, "./dist")
}
};

4.webpack配置核心概念

零配置是很弱的，特定的需求，总是需要自己进行配置
webpack有默认的配置文件，叫 webpack.config.js ，我们可以对这个文件进行修改，进行个性化配置

 

• 使用默认的配置文件：webpack.config.js
• 不使用自定义配置文件： 比如webpackconfig.js，可以通过--config webpackconfig.js来指定webpack使用哪个配置文件来执行构建

 

webpack.config.js配置基础结构

module.exports = {
    entry: "./src/index.js", //打包入口文件
    output: "./dist", //输出结构
    mode: "production", //打包环境
    module: {
         rules: [
          //loader模块处理理
              {
                  test: /\.css$/,
                  use: "style-loader"
               }
         ]
    },
     plugins: [new HtmlWebpackPlugin()] //插件配置
};

4.1-entry:

指定webpack打包入口文件:Webpack 执行构建的第一步将从Entry 开始，可抽象成输入

//单入口 SPA，本质是个字符串
entry:{
    main: './src/index.js'
}
==相当于简写===
entry:"./src/index.js"
//多入口 entry是个对象
entry:{
  index:"./src/index.js",
  login:"./src/login.js"
}

4.2-output:

打包转换后的文件输出到磁盘位置:输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

output: {
    filename: "bundle.js",//输出文件的名称
    path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路路径
},
//多入口的处理
output: {
    filename: "[name]--[chunkhash:8].js",//利用占位符，文件名称不要重复
    path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路径
},

4.3-mode

Mode用来指定当前的构建环境

• production
• development
• none

设置mode可以自动触发webpack内置的函数，达到优化的效果

开发阶段的开启会有利于热更新的处理，识别哪个模块变化
生产阶段的开启会有帮助模块压缩，处理副作用等一些功能

 

4.4-loader

Webpack 默认只支持.json 和 .js模块 不支持 不认识其他格式的模块

模块解析，模块转换器器，用于把模块原内容按照需求转换成新内容

webpack是模块打包工具，而模块不仅仅是js，还可以是css，图片或者其他格式

但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模处理，和处理方式就需要loader了

 

常见的loader

style-loader
css-loader
less-loader
sass-loader
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法
file-loader//处理理图片 子图
eslint-loader
...

4.5-moudle

模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到是什么格式的模块，使用什么loader来处理。

module:{
    rules:[
       {
            test:/\.xxx$/,//指定匹配规则
            use:{
                     loader: 'xxx-load'//指定使⽤用的loader
                   }
        }
    ]
}

 

5.Plugins

• 作用于webpack打包整个过程
• webpack的打包过程是有（生命周期概念）钩子

 

plugin 可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

作用于整个构建过程

clean-webpack-plugin

 

npm install --save-dev clean-webpack-plugin

 

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
new CleanWebpackPlugin()
]