Webpack

webpack是什么

webpack是一种前端资源构建工具，一个静态模块打包器(module bundler).在webpack看来，前端的所有资源文件(js、json、css、img、less、scss…)都会作为模块处理，根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle).

webpack作用

• 能够对前端资源进行打包
• 良好的兼容性。能够自动将新版本代码转为低版本代码。比如ES6->ES5
• 不同模块打包：对于其他资源也可以进行打包，比如将scss和css等进行打包处理。
• 提供丰富的插件。能够简化其他的项目工作

webpack五个核心概念

entry

入口(entry) 指示 webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

output

输出(output) 指示 webpack打包后的资源 bundles 输出到哪里去，以及如何命名

loader

loader 让 webpack能够去处理那些非 js文件 webpack本身能够处理js和json资源

plugins

插件(plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等

mode

模式(mode)指示webpack使用相应模式的配置

选项	描述
development（开发模式）	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production（生产模式）	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。比开发模式多一个压缩代码

webpack使用

1. 使用npm init针对前端项目生成package.json

2. 下载并安装webpack

   npm i webpack webpack-cli --save-dev
   

   • --save-dev:表示在开发模式中能够使用，上线之后就不再使用，可以简写成-D

• 通过webpack命令和配置文件来对项目打包进行配置。

配置文件webpack.config.js

/* 配置文件 
    作用：指示webpack干哪些事（当运行webpack指令时，会加载里面的配置）

    所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs

    loader :1 下载 2.使用(配置loader)
    plugins:1.下载 2.引入 3.使用
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。它支持css和sourceMaps的按需加载。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
    // webpack配置
    //入口起点
    entry: {
        index: "./src/js/index.js",
        login: "./src/js/login.js",
        register: "./src/js/regist.js"
    },
    // 输出
    output: {
        // 输出文件名
        filename: './js/[name].js',
        // __dirname  nodejs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'dist')
    },
    // loader的配置
    // 不同文件必须配置不同loader处理
    module: {
        rules: [
            // 详细的loader配置
            {
                // 打包css
                //匹配哪些文件
                test: /\.css$/i,
                //use数组中的loader执行顺序：从右到左，从下到上 依次执行
                use: [
                    MiniCssExtractPlugin.loader,
                    // 创建style标签，将js的样式资源插入进行,添加到head中生效，这里使用了插件，与此loader冲突，所以不写
                    // 'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            // 打包scss文件
            {
                test: /\.scss/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 将scss文件编译成css文件
                    'sass-loader'
                ]
            },
            // 打包图片
            {
                test: /\.(jpg|png|jpeg|gif)/i,
                // 下载：url-loader 依赖于 file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb,就会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积 会更大(文件请求速度更慢)
                    limit: 1024 * 8,
                    // 输出路径
                    outputPath: './assets/',
 // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
// 解析时会出问题：[object Module]
// 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
                    esModule: false,// 用于解决兼容性问题
                    // [hash:6]取图片的hash的前6位
                    // [ext]:取文件原来的扩展名
                    name: '[hash:6].[ext]'
                }
            },
            // html 中 img
            {
                test: /\.html$/i,
                // 处理html文件中的img图片(负责引入img，从而被url-loader进行处理)
                loader: 'html-withimg-loader'
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
        // 打包html 使用 html-webpack-plugin插件:
        // 功能:默认会创建一个空的html，自动引入打包输出的所有资源(js、css)
        htmlPlugin('index'),
        htmlPlugin('login'),
        htmlPlugin('register'),
        new MiniCssExtractPlugin({
            filename: './css/[name].css'
        }),
        // 全局暴露jquery
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',

        })
    ],
    mode: 'development',// 开发模式
    // mode:'production', //生产模式
    // 开发服务器devServer:用来自动化(自动编译自动打开浏览器，自动刷新浏览器)
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动指令：webpack4:webpack-dev-server
    // webpack5:npx webpack s
    devServer: {
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 8888,

        // openPage:'html/login.html',webpack5不支持报错
        open: ['html/login.html'], // 启动服务器时自动打开页面
        hot: true, // 实时更新
        //跨域问题解决
        proxy: {
            '/': { 
                target: 'http://localhost:3000'  // 后端服务器地址
            }
        }
    }
}
//封装打包html文件
function htmlPlugin(filename) {
    return new HtmlWebpackPlugin({
        //需要打包的HTML页面, 设置要打包的源文件 HTML 的路径
        template: `./src/html/${filename}.html`,
        //设置打包后的文件路径和文件名
        filename: `./html/${filename}.html`,
        //需要引入的js文件名数组, 当前 HTML 文件中引入的 JS 的名字
        chunks: [filename]
    })
}