webpack模块打包

什么是打包工具

打包并优化项目文件，节省开发效率

额外知识拓展

JS文件包含另一个文件使用require方法 require('另一个文件的路径')
JS文件如需在index.js入口文件处引入，需要在当前JS页面内暴露

module.exports = {  
    //具体语法
}

插件使用时需要在webpack.config.js顶部引入

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//声明变量MiniCssExtractPlugin为require引入的mini-css-extract-plugin插件

并在plugin处new对应的插件名

new MiniCssExtractPlugin(options:{  
    template:'',  
    filename: '
'})

Gzip压缩编译？？？？？ 点此前往查看open in new window

webpack基本概念

安装时需要安装webpack和其脚手架webpack-cli
没配置完一项，需要终端输入webpack来执行相关命令
webpack原理概念图

1. 树结构：

在一个入口文件中引入所有资源，形成所有依赖关系树状图

2. 模块：

模块就是多个文件打包成一个模块，可以是ES6模块，commonJS模块等，对于webpack来说，就是（css,img,.....）

**3. chunk:

打包过程中被操作的模块文件叫做chunk，例如异步加载一个模块就是一个chunk

**4. bundel：

是最后打包后的文件，可以和chunk长的一样，但是大部分情况下他是多个chunk的集合
为了优化最后生产出的bundle数量可能不等于chunk的数量
因为有可能多个chunk被组合到了一个bundel中

webpack报错

webpack安装好后，运行webpack -v会提示错误，或者打包时提示错误
解决方法:
- 以管理员身份运行IDE
- 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止
- 执行：set-ExecutionPolicy RemoteSigned
- 这时再执行get-ExecutionPolicy，就显示RemoteSigned

webpack核心概念

打包时必须要暴露文件，里面语法为json格式（键，值模式）
五个核心配置项必要包含在暴露语法内

module.exports = {  
    //具体语法
}

项目目录下新建一个JS（webpack.config.js）文件
建议采用官方默认的名称，如不用，则每次都需要指定，很繁琐

1. 入口

entry，入口指示webpack以哪个文件作为入口起点开始打包，分布并构建依赖图

entry: "入口文件具体路径",

2. 输出

output，输出指示webpack打包后的资源（bundles）输出到哪里，以及如何命名
语法格式为json格式，filename为输出的文件名称，path为输出文件的具体路径
path指定路径时需要调用node.js的包，具体语法如下：

2-1. webpack.config.js文件顶部接收resolve函数

const {resolve} = require('path');

2-2. 在output的path处调用resolve方法

output: {  
    filename: "输出文件的名称",  
    path: resolve(__dirname, '路径目录的名称')
    //调用nodejs的resolve方法来指定输出目录
},

3. 翻译

loader（翻译）默认情况下，webpack只能处理js,json格式的文件，
使用loader可以让webpack处理非js,json文件
使用module方法
示例：

module: {   
    rules: [    
            {        //具体语法
                test: /\.css$/,    //正则匹配文件类型
                use:['style-loader','css-loader']    //多个loader
            }  
        ]
},

4. 插件

plugins(插件)可以用于执行范围更广的任务，包括打包优化，压缩，重新定义环境等，语法格式为数组模式

plugins: [  
    new HtmlWebpackPlugin()
]

5. 模式

mode（模式）指示webpack使用相应依赖模式的配置
指示相应依赖模式时，会自动启用一些对应的插件
开发依赖模式插件较少，生产模式较多

mode:'development'

webpack多入口与多出口

1. 字符串模式，单入口

入口文件需要与要打包的文件形成关联，才可打包
如果只有一个入口，使用字符串，指定一个入口文件，打包一个chunk，chunk的名称是默认的（出口指定的名称）

2. 数组模式，多入口

写多个入口文件，所有的入口文件形成一个chunk，名称是默认的，输出也是一个bundle

entry: ["具体入口路径1","具体入口路径2"],

3. 对象模式，多入口

写多个入口文件，有几个入口文件就会生成几个chunk，并输出几个bundle，chunk的名称是对象的key（键）如下示例1语法
需要在output（输出）filename下更改为以下示例2语法
示例1：

entry: {  
    one:'./具体入口路径',  //左边为key（键）
    two:'./具体入口路径'
},

示例2

output: {  
    filename: "[name].js",  //
    path: resolve(__dirname,'build')
},

4. 特殊用法，对象和数组混合

entry: {  
    //数组多入口
    onea:["具体入口路径1","具体入口路径2"],  
    //单入口
    twob:"具体入口路径3"
},

打包html资源

需要单独使用插件（plugins）对html文件进行处理
npm安装html-webpack-plugin插件
-D为生产依赖的缩写

npm i html-webpack-plugin -D

需要通过webpack.config.js文件里在顶部添加使用require方法
示例1：

const HtmlWebpackPlugin = require("html-webpack-plugin");

webpack.config.js里plugins使用构造方法来引用此插件
默认情况下，会创建一个空的html，目的就是自动引入打包的资源（js/css）
示例2：

plugins: [  
    new HtmlWebpackPlugin()//构造方法
]

如果需要自己指定打包的html，生成自己指定的文件名
则需要在构造方法中加json对象的参数options
在options里使用minfy方法还可移除空格和移除注释
移除空格只会删除html格式的空格，不会删除标签内内容的空格
minfy为对象形式
示例3：

plugins: [  
    new HtmlWebpackPlugin(options:{  
        template: "指定需要打包的html文件原路径",  
        filename: "指定打包好的文件名称"  
        minify: {  
            collapseWhitespace:true,   //移除空格                             removeComments:true   //移除注释
        }
    })
],

注意：webstorm中，new HtmlWebpackPlugin后手写options属性时会报错，正确做法是在new HtmlWebpackPlugin后面括号内写入花括号会自动生产options属性

打包多个html文件

打包多个html文件时，需要添加多个new HtmlWebpackPlugin
给每个打包的html文件指定引入的build时，需添加chunk属性
如下示例：

//第一个打包的html文件
new HtmlWebpackPlugin( options:{  
    template: "./src/index.html", //需要打包的路径
    filename: "index.html", //指定打包好的文件名称
    chunks: ['index','vendor'],  //指定引入其它文件的build名称
    minify: {   
        collapseWhitespace:true,    //移除空格 
        removeComments:true  //移除注释
        }
}),

//第二个打包的html文件
new HtmlWebpackPlugin(options:{  
    template: "./src/cart.html",  //需要打包的路径
    filename: "cart.html",  //指定打包好的文件名称
    chunks: ['cart','vendor'],  //指定引入其它文件的build名称
    minify: {    
        collapseWhitespace:true,    //移除空格 
        removeComments:true  //移除注释
        }
})

//指定引入其它文件的build（就是入口文件打包输出的文件）
entry: {  //左边为build名称
    vendor: ['./src/js/jquery.js','./src/js/common.js'],                 index:'./src/js/index.js',  
    cart:'./src/js/cart.js'
},

打包CSS资源

需要npm安装css-loader和style-loader
css-loader的作用是把css资源打包到js文件中
style-loader的作用是把打包好的js文件里的样式放到html里
单个loader可以直接loader属性使用
多个loader则需要使用数组形式，并匹配规则
css文件需要先css-loader后syle-loader
规则是从右到左、从上到下
示例：

module: {   
    rules: [    
            {        //具体语法
                test: /\.css$/,    //正则匹配相关文件类型
                use:['style-loader','css-loader']    //多个loader
                loader: "css-loader"  //单个loader
            }  
        ]
},

打包less和sass资源

打包less和sass文件时，都需要保留css-loader和style-loader
语法与打包css资源一致，只是多了less-loader和sass-loader
正则匹配sass文件类型时，需更改为正则匹配scss类型，而不是sass（sass有sass与scss俩种格式）
- 打包less
  - 需要npm安装less包和less-loader
- 打包sass
  - 需要npm安装node-sass包和sass-loader

提取css为单独文件

style-loader默认会把css样式通过JS写入到html里
编译修改起来有时不太方便，可以使用MiniCssExtractPlugin.loader替换style-loader来提取css为单独文件，不需要引号引起来
不支持打包为多个build
需要npm安装mini-css-extract-plugin插件
示例：

new MiniCssExtractPlugin(options:{  
    template:'',  
    filename: ''
})

use:[MiniCssExtractPlugin.loader,'css-loader'],

处理CSS浏览器兼容性

需要使用postcss处理兼容性
同样适用于css/less/scss格式
npm安装post-loader包和postcss-preset-env插件
postcss有单独的文件(postcss.config.js)配置插件 1. 和webpack.config.js一样需要暴露出去
示例1：

module.exports = {  
    plugins:[    
        require('postcss-preset-env')()   
    ]
}

2. 在webpack.config.js里loader处添加到最右面

默认执行顺序时，先处理兼容性，然后在执行其他的loader
会自动在postcss.config.js查找postcss-preset-env插件有没有

>use:[MiniCssExtractPlugin.loader,'css-loader', "postcss-loader"],

3. 指定兼容浏览器条件

在package.json里使用browerslist方法来指定规则
browerslist可以选择对象与数组模式
对象模式可以分别指定开发依赖和运行依赖的规则
默认情况下建议使用数组模式，只指定运行依赖的条件
可以指定多条规则，如下示例2：
示例2：

"browerslist": [ 
    "> 0.2%",//小于20%的浏览器都支持 
    "last 2 versions",//最新的2个浏览器版本 
    "not dead",//废弃的浏览器
]

压缩CSS内容

需要npm安装optimize-css-assets-webpack-plugin插件
webpack.config.js顶部引入
然后plugins处new引入执行即可，如下示例1：
示例1：

new OptimizeCssAssetsWebpackPlugin()

打包图片资源

CSS里打包图片方法

需要npm安装url-loader包和file-loader包
俩个包互相是依赖关系，可以加载任何文件
url-loader可以将图片转为base64字符串，能更快的加载图片
一旦图片过大，就需要使用file-loader加载本地图片
base64格式为计算机把图片生成为二进制指令存储在服务器，但不会存储本地
hash为计算机生成base64格式图片的名称，默认名很长，可以hash：10来指定具体名称长度，需要用[ ]包起来使用
故url-loader可以设置图片超过多少字节时，使用file-loader加载图片，如下示例
示例：

{
    test:/\.(png|jpg|jpeg|gif)$/,
    loader:'url-loader',
    options{
        publicPath:'样式内添加的路径名称，例如 ./images '
        outputPath:'图片的路径'  // 指定打包好的目录
        limit:'1024 * 8'  //1024个字节*8倍
        以上为指定规则为8kb的图片打包为base64格式
        name:'[name][hash:10].[ext]' 
        //打包后的名称，可以自定义指定规则
        例如：保留原名称+hash名+格式
        esModule:false,  //老版本浏览器则需此属性
     }
}

base64格式为计算机把图片生成为二进制指令存储在服务器，但不会存储本地
hash为计算机生成base64格式图片的名称，默认名很长，可以hash：10来指定具体名称长度，需要用[ ]包起来使用
ext为默认原图片格式，需要用[ ]包起来使用，如需指定格式，则不需要 [ ]
打包图片资源时，16kb以下建议打包成base64格式
老版本浏览器则还需要在options最后一行添加esModele:false属性

Html里打包图片方法

如需HTML里打包图片路径，则需要再加一个loader 使用html-loader包来处理，只需要添加test规则指定.html格式
options规则可以直接沿用之前添加的loader里的规则而不需要在这个loader里重新编写，然后loader处使用html-loader，具体语法如下
示例2：

打包其它资源

字体图标库......等等

打包字体库

打包其他格式资源时，如格式较多，可使用exclude(排除正则)来匹配，排除已使用，已打包的格式
使用file-loader来打包其他资源
options指定规则，和打包图片的options规则，不用加字节规则如下示例：
示例：

{    
exclude:/\.(js|json|html|css|less|scss|png|gif|ipg|jpeg)$/,    //格式排除正则表达式  
loader:"file-loader",  
options: {    
outputpath: "路径",//  打包好的路径    
publicPath: " 路径",//css里的引用路径   
name:"[name][hash:6].[ext]"//指定名称、hash名称长度、保留原格式  
        }
}

JS/JSON语法配置检查

默认情况下，js/json格式文件不需要单独处理
但是需要通过eslint单独检查一下JS语法配置
需要npm安装eslint、eslint-loader、eslint-config-airbnb-base、eslint-plugin-import缺一不可，互相形成依赖
下载安装好后需要在package.json里配置规则，具体语法如下：
示例：

"eslintConfig": {  
    "extends": "airbnb-base"  //此规则较多使用
}

只检查当前项目写的js，不需要检查第三方JS插件包
只需要排除node_modules目录
options里加上fix:true，可以自动检查后修改，程序逻辑除外
示例2：

{  
    test:/\.js$/,  //正则匹配相关格式
    exclude:/node_modules/,    //正则排除第三方JS插件包
    loader:'eslint-loader' 
    //使用此loader，自动调用package.json里eslintConfig规则
    options: {  
        fix:true
        }
}

如需遇到不想被检查并修复的语法，只需要在相关语法前加上以下规则注释，打包时会自动排除，如下示例3
一般console.log较多，因为只在开发时会用
示例3：

// eslint-disable-next-line
console.log("这是入口文件");

配置开发服务器

可以实时编译、实时浏览器预览
需要npm安装webpack-dev-server
安装后需终端输入webpack serve启动
webpack5不支持自动编译，自动浏览器刷新，只能通过webpack.config.js里配置target:"web"项
配置target:"web"项后，先退出webpack secer后再次进入
然后浏览器输入localhost:相应的端口号
其他命令：

//此为更改端口开发服务器端口号
webpack serve --port 3003

通常可以直接在webpack.config.js里配置dev-server选项
包括端口号等等。具体语法如下：
示例：

devServer: {  
    port:3001,  //设置端口号为3001  
    compress:true,  //使用GZIP压缩编译  
    open:true //设置自动打开浏览器
    }

开发环境优化 - HMR模块热替换

此功能可有可无，非必须项
在已经配置好开发服务器的默认情况下，每次更改代码webpack会把所有页面都打包刷新一次，如果文件多的情况下，会非常耗时间，这时就需要用到HMR模块热替换
在devServer配置项里加入hot:true开启HMR功能
开启后，修改代码时，只会更新当前修改代码，而不会刷新整个项目
CSS样式的HMR功能需配置style-loader后才能使用
Html里HMR功能需要在index.js入口文件entry处加载Html文件
JS文件默认没有HMR功能，只能处理非入口文件的JS文件
JS需要在入口文件index.js里写入判断，

if(module.hot){  
    module.hot.accept('需要HMR功能的JS文件路径'),function (){        //监听如果加载的JS文件发生变化，执行此回调函数        demo(); //具体执行的回调函数 ,回调函数需要在当前JS文件中暴露
    }
    }

运行(生产)环境优化 - 去除无效代码

html无需去除无效代码
CSS，JS、第三方框架和库同样适用去除无效代码
webpack自带的tree-shaking可以去掉实际上没有使用的JS代码来减少包的大小，必须使用ES6模块化，并开启production运行环境
去除无效CSS代码需要npm安装使用purgecss-webpack-plugin插件
除在webpack.json.js中顶部引入插件外，还需要再webpack.json.js中配置path方法，可以和const {resolve} = require("path")合并为 const {resolve，join} = require("path")
并在plugin处new对应的插件名，写入PATHS方法
然后声明PATHS，具体语法如下：
示例：

const {resolve,join} = require('path'); //顶部
//顶部和之前的path合并，不影响，都调用的是一个path

const PurgecssWebpackPlugin = require('purgecss-webpack-plugin');
//引入purgecss-webpack-plugin插件

const PATHS = {src:join(__dirname,"src")}
//声明并调用PATHS方法

new PurgecssPlugin(options:{                                           paths:glob,sync('${PATHS.src}/**/*',{nodir:true})
}),  //写paths方法

看的比较迷，需要重点去了解

总结

如果拿到别人给的项目文件，或者给别人的项目文件
没有node_modules和build的情况下
只需npm install执行即可恢复，会根据package.json里的配置按顺序执行
vue-cli脚手架自带webpack相关配置