webpack

目标: webpack本身是, node的一个第三方模块包, 用于打包代码

现代 javascript 应用程序的 静态模块打包器 (module bundler)

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

其中功能: less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩合并

（wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包）

因此安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
全局安装webpack
局部安装webpck–save-dev是开发时依赖，项目打包后不需要继续使用。

dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
main.js：项目的入口文件。
mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。
index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹的内容）。
package.json：通过npm init生成的，npm包管理的文件。

entry: 为打包的入口
output： 为打包的出口

将webpack命令映射npm run除了将webpack映射入口，出口之外，还可以将webpack命令映射为npm run 文件

webpack - 打包 js
配置

1.创建webpack配置文件 webpack.config.js

// 导入path模块
const path = require('path')
​
// webpack配置
module.exports = {
    // 配置打包入口文件
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 配置打包输出位置，及文件名
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: 'bundle.js'
    }
}
2.配置webpack执行命令

webpack需要npm来调用才可以执行，在package.json中的script中进行配置

"script":{
   "dev":"webpack --config webpack.config.js"
}
​
经过以上配置，在控制台运行 npm run dev 命令执行 webpack对 js 文件进行打包

development 开发模式

开发模式 :不会对打包生成的文件进行代码压缩和性能优化 打包速度快，适用于开发阶段使用

production 生产模式

生产模式: 会对打包生成的文件进行代码压缩和性能优化 打包速度很慢，仅适合在项目发布阶段使用不设置默认为production模式

在webpack.config.js中添加一个mode配置项

// 导入path模块
const path = require('path')
​
// webpack配置
module.exports = {
    // ---------------- 打包模式
    mode: 'development',
    
   /* // 配置打包入口文件
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 配置打包输出位置，及文件名
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: 'bundle.js'
     */
    }
}

打包不同类型文件，要使用不同的loader，loader的作用：读取文件内容。对文件内容进行特定的处理。

npm i style-loader css-loader --save-dev下载 style-loader、css-loader

css-loader是将css代码从css文件中读取到内存中，而style-loader是将读取到的css代码设置到index.html文件的style标签内

// webpack配置
module.exports = {
    // ...
    
    // 扩展文件加载模块 - css模块加
    module: {
        // 由于可以加载多种文件，每种文件对应一种loader，所以是数组
        rules: [
            // 由于是多种文件，所以使用扩展名进行区分，再应用不同的loader
            {
                // 正则判断文件类型
                test: /\.css$/i,
                // 这种类型文件使用以下loader
                use: ['style-loader', 'css-loader'],
            }
        ]
    }
​
}

npm i less-loader --save-dev下载 less-loader

webpack - 打包图片
在webpacke5.0中无需下载安装图片对应的loader(模块)，因为内嵌了对象图片资源处理的模块，可以直接使用内置的资源模块进行处理(asset/modules) 内置了四种处理图片的资源模块

asset/resource

将图片文件单独打包成一个文件，保存到打包目录，再使用url(file:///d:/xxx/xxx) 就相当于将原图片，复制到了另个新的位置，改了名，url再指向新的位置即可。 之前是通过 file-loader 实现

asset/inline 

将图片读取成base64格式，使用时通过url(data:image/png;base64,xxxxx)进行引用 之前是通过 url-loader 实现

asset/source

主要用于字体文件 通过 data:font/woff2;base64,xxxxxoxxox 之前是通过 raw-loader 实现

asset

在asset/resource 与 asset/inline之间自动选择，之前是通过url-loader，并配置资源体积限制实现。
webpack - 打包生产代码
当一个项目开发完毕后，要对项目的代码进行最终的打包，最终的打包，要以production模式进行。

可以修改webpack.config.js中的mode:'production'

// webpack配置
module.exports = {
    // 打包模式
    // 生产环境打包模式
    mode: 'production',
}
（推荐）也可以在package.json的 script 中配置打包命令，通过--mode=production来指定

"build":{
   "serve":"webpack --config webpack.config.js --mode=production"
}
打包命令

npm run build