Webpack打包流程

最小流程

运行 npm webpack webpack-cli -D安装webpack，和webpack-cli命令行工具
在项目根目录中，创建名为webpack.config.js的webpack配置文件
在webpack的配置文件中，初始化如下基本配置：

module.exports = {
    mode:'development'
}

在package.json配置文件中的scripts节点下，新增dev脚本如下：

"scripts":{
    "dev":"webpack --mode development"
}

在终端运行npm run dev命令，启动webpack进行项目打包

如下是用development模式打包出来的js文件大小:327kb

如下是用production模式打包出来的js文件大小：88.3kb： production模式使用了代码压缩、混淆等技巧，所以打包出来的文件比较小。但是同时打包时间变长了，这里是dev模式的6-7倍。

这里打包默认入口文件为./src/index.js，默认出口文件为./dist/main.js

配置打包入口与出口

webpack.config.js进行如下配置

const path = require('path')
module.exports={
    entry: path.join(__dirname,'./src/index.js'),
    output:{
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode:'development'
}

分析一下打包时控制台的输出：

可缓存模块：这里的可缓存模块为286kb，其中286kb是jquery。jquery文件相对来说还挺大的，并且打包的时候会带进来，谨慎使用

运行时模块：运行时模块大小为937kb 总共4个模块，大胆猜测运行时模块是webpack打包过程中需要用到的模块

输出资源：输出资源bundle.js大小为328kb，比可缓存模块大一些，看了一下bundle.js文件，里面还有一些与webpack相关的配置。

index.js在bundle.js被打包为如下：大概知道这里使用了js中的eval语法
index.html中的body下面引入该bundle.js文件，打开页面，如下图所示

Notes: 在使用webpack打包之前，打开该页面没有显示颜色交替的效果，原因是index.js中的import使用的是ES6语法，浏览器不兼容，使用webpack打包之后就变为ES5语法啦

配置自动打包功能 webpack-dev-server

运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具

这里使用后缀-D相当于--save -dev会将该依赖直接添加到package.json的devDependencies中

devDependencies和dependencies的区别：
npm install：安装devDependencies和dependencies的依赖
npm install --production : 只安装dependencies的依赖(使用场景很少，如果在CI上配置这个命令，其实很容易导致项目构建失败，因为一旦判断错误，将应该放到dependencies的包放到devDependencies，就会导致构建失败)

修改package.json->srcipts中的 dev 命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development",
    "dev": "webpack-dev-server"
  },

修改webpack配置文件：

端口配置为 5000，默认配置为8080,但是这是vue项目的默认端口，会发生冲突
配置静态输出文件位置
用devserver起一个服务会将文件托管在内存中的8080端口，会重新进行一些文件规划

const path = require('path')
module.exports={
    entry: path.join(__dirname,'./src/index.js'),
    output:{
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },
    devServer:{
        open:true,//自动打开浏览器
        port: 5000,//配置端口  自动打开和端口号配置也可以在package.json文件中的script项目进行 例如： "dev": "webpack-dev-server --open --host 127.0.0.1 --port 5000"
        static:"./"
        // hot:true
    },
    mode:'development'
}

将src->index.html中script脚本的引用路径修改为"/bundle.js"
运行npm run dev命令重新打包
在浏览器访问http://localhost:5000 地址，查看自动打包效果
这个时候就可以进行热更新了
控制台输出如下：
这里打包时间就大大增加了在，主要是因为引入了webserver，需要进行程序托管，开websocket服务等等，这里会将一些websocket相关的内容打包进bundle.js文件中，所以bundle.js文件也变大了……

配置生成预览页面 htmlWebpackPlugin

在默认情况下，打开页面会显示文件页面，点击src文件才会显示实际页面。现在配置打开浏览器默认显示index.html页面，

使用命令行下载html-webpack-plugin： npm install html-webpack-plugin -D
修改webpack.config.js配置文件引入并且使用插件，引入并实例化插件如下所示：index.html在根目录，在浏览器打开该地址自然就直接打开该页面啦

const HtmlWebpackPlugin =require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html', //指定要用到的模板文件
    filename: 'index.html'//指定生成的文件名称，该文件存在于内存当中，在目录中不会显示
})

配置CSS、less加载器

配置CSS加载器

webpack内置模块只能识别和打包.js文件。需要另外配置CSS 相关加载器来打包CSS文件

运行npm i style-loader css-loader -D命令，安装处理CSS文件的loader。
css-loader：是用来加载 CSS，支持模块化、压缩、文件导入等特性。 style-loader: 将CSS 代码注入到 JavaScript 中，通过 DOM 操作加载 CSS。
在webpack.config.js的module->rules数组中，添加loader规则如下：

  module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    },

webpack在打包CSS文件的过程中，需要先用css-loader加载css文件，再将css注入再JS中
use数组中指定的loader顺序是固定的
多个loader的调用顺序是，从后往前的

配置less加载器

运行npm i less-loader -D命令
在webpack.config.js的module->rules数组中，添加loader规则如下：

{test:/\.less$/, ues:['style-loader','css-loader','less-loader']}

配置postCSS

运行npm i postcss-loader autoprefixer -D安装postcss-loader和插件autoprefixer
修改webpack.config.js中module->rules：

{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},

其中autoprefixer可以为css文件内容添加前缀，以兼容不同浏览器

打包样式表中的图片和字体文件

Webpack默认情况下无法打包样式表中的图片和字体文件

运行npm i url-loader file-loader -D命令
在webpack.config.js中的module->rules中添加如下loader规则

{test:/\.jog|png|gif|bmp|ttf|eot|sbg|woff|woff2$/, use: 'url-loader?limit=16940'}

其中？之后的是loader的参数项目 limit用来指定图片的大小，单位是字节。只有小于等于limit大小的图片，才会被转为base64图片

打包处理js文件中的高级语法

安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中创建babel配置文件babel.config.js并初始化基本配置如下

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

修改webpack.config.js 的modules->rules 如下：

{test:/\.js/, use:'babel-loader', exclude:/node_modules/}

webpack中配置vue组件的加载器

运行npm i vue-loader vue-template-compiler -D
在webpack.config.js配置文件中，添加vue-loader配置如下：

const { VueLoaderPlugin } = require('vue-loader')
//module->rules中
{ test: /\.vue$/, loader: 'vue-loader' }

这是项目的最终依赖：

source-map

webpack.config.js配置

    devtool:'inline-source-map'

使用inline-souce-map工具可以在浏览器中看到源码，方便调试

WebPack打包流程