webpack介绍

webpack介绍

基于nodejs的一个打包的工具

vue: npm run serve / npm run build ---- webpack

作用

1. 优化：工程化、vue cli、react cli
2. 打包： 将多个文件进行压缩，打包成一个文件 ---- 带宽
3. 转换：es6，ts，jsx,tsx,less,sass,stylus

目标

1.从0开始搭建webpack
2.使用webpack来搭建vue和react的脚手架

webpack结构

1.入口：entry ---- vue src/main.js
2.出口：output ---- vue dist
3.插件：plugins ---- vue public/index.html -> dist/index.html
4.devServer: 开发者服务器配置 - vue vue.config.js
5.转换： loaders ---- vue es6语法、sass文件转换成为浏览器可以解析的文件
6.module
7.mode: 模式 ----》 开发环境 生成环境

node:
开发环境（development）: 你写的代码环境

生产环境（production）:打包后要上传到服务器的环境

webpack的配置

版本

webpack - 4.X ------- 免配置但可配置

webpack - 4.X以下版本 ------- 必须配置

0配置

不需要额外的配置 -》 默认的配置项

默认的入口就是 当前项目根目录下的 src 文件夹下的 index.js文件

默认的出口就是 dist 目录下打包的 main.js

安装模块

cnpm i webpack webpack-cli -g

webpack: webpack核心模块

webpack-cli: 执行webpack的相关命令行

webpack -v

说明：webpack的版本在4以上即为正常，如果为3，重新执行以上指令全局安装（webpack webpack-cli）即可

案例1 - demo1

将src文件夹下的 index.js文件 通过 webpack 指令打包至dist/main.js

• 疑问1：入口代码简单，出口代码复杂，为什么说还是优化了呢？
• 疑问2：打包时报了警告信息，如下图所示
  

解决疑问2

运行指令1： - 未压缩

webpack --mode development

运行指令2: - 压缩

webpack --mode production

解决疑问1：如果你的模块化、组件化开发呢？

案例2：demo2

• 疑问： 能不能打包多个入口？ ==== 将多个文件打包成一个

案例3：demo3 ---- 多入口

• 疑问：不管是单入口还是多入口 ，打包的文件名字都叫做 dist/main.js，能不能改个名字名字呢？比如说 打包至 build/bundle.js

demo1: webpack --mode development --output build/bundle.js

demo2:

demo3:

• 疑问：使用webpack是为了操作方便，但是现在每次运行的指令都很麻烦

案例4： demo4

npm init -y ----- 生成package.json的基本配置文件

scripts 选项中添加webpack的打包指令

webpack的配置

案例5：demo5

创建webpack.config.js的配置文件，

// webpack 基于node，必须确保已安装node// 导出一个模块, 对象，添加一些选项（入口，出口，模式.....）const path = require('path');
module.exports = {
    mode: 'development', // production
    entry: './src/index.js', // 入口文件
    output: {
        // path: __dirname + '/build',
        path: path.resolve(__dirname, './') + '/build',
        filename: 'bundle.js'
    }
}

只需要在命令行里运行 webpack 指令即可

运行webpack指令时，该命令一定需要与webpack.config.js同级别

• 疑问：webpack的配置文件一定得必须是 webpack.config.js文件吗？

案例6：demo6

webpack --config nz.config.js

虽然可以更改 配置文件名称，但是一般不建议修改

• 疑问：配置文件中的入口，如果出现多入口怎么办

案例7：demo7 - 多入口单出门 - 数组

• 疑问：如果是多入口多出口呢？

案例8： demo8- 多入口多出口 - 对象

• 疑问：如果写一个通用形式的入口以及出口，适用于所有场合

案例9：demo9 -- 通用形式的写法

• 疑问： 如果想要在打包时，先清空所有的内容，然后再打包呢？

案例10：demo10 -- 打包前先清空

通过配置webpack的插件实现

cnpm i clean-webpack-plugin -D

案例11： demo11 -- 打包携带页面
通过配置webpack的插件实现

cnpm i html-webpack-plugin clean-webpack-plugin -D

cnpm i webpack webpack-cli -D

• 默认会在dist目录下生成 index.html页面，如果想要换名字（一般不设置，采用的就是默认的名字）
  

• 假设页面中有缓存的信息，清除缓存（有必要设置）
  

• 如果想要屏蔽自动引入js或者修改js引入的位置
  

• 如果项目中是多入口多出口时，需要自动引入导出的js文件，并且如果需要设定导入的顺序
  
  
  

• 模拟vue项目，添加动态的标题时

public/index.html

dist目录下的文件index.html 浏览器打开

查看dist/index.html源码

• 如果想要清除注释语句、想要清除双引号、代码折叠去除空格

public/index.html

dist/index.html

• 移除空标签
  
  
  
•  文章来之吴大勋（大勋哥）