webpack定义

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

webpack五个核心概念

1.Entry

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

通俗来说，就是告诉webpack应该从项目的哪个文件着手对整个项目进行打包。

2.Output

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

3.Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript，所以loader可以理解为webpack的扩展，不同的文件处理需要不同的loader)

(可以理解为一个翻译官，不同的语言需要不同的翻译官)

4.Plugins

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

5.Mode

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

开发模式和生产模式：

标题	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线运行的环境

webpack练手

新建一个文件夹在vscode中打开

初始化pakage.json文件

终端输入npm init，起个名字然后剩下默认回车，生成package.json文件。

安装需要的第三方包

先全局安装webpack和webpack-cli

npm i webpack@4.41.6 webpack-cli -g

webpack是运行在node环境中的,我们需要安装以下两个npm包：

npm i webpack@4.41.6 webpack-cli -D

-D是–save-dev的简写表示添加到开发依赖，webpack里所有东西都是开发依赖。安装完成后会出现node_moudel依赖包，然后就可以写代码了。

编写程序

新建src文件夹与build文件夹

src文件夹用来放置我们编写的代码，build文件夹用来放置webpack打包完成的文件。

webpack使用测试

在src下新建index.js写一点简单的js代码：

function add(x, y) {
    return x+y
}

console.log(add(1, 2));
复制代码

在终端中执行：
webpack ./src/index.js -o ./build/built.js --mode=development

这句命令意思是：

webpack会以./src/index.js为入口文件进行打包，打包后输出到./build/built.js；整体打包环境是开发环境。

(如果是webpack5版本的，命令改为：

webpack --entry ./src/index.js -o ./build/built.js --mode=development )

可以看到build/built.js下多了一个main.js文件。
——————————————————————————————-在终端中执行：
webpack ./src/index.js -o ./build/built.js --mode=production

这句命令意思是：

webpack会以./src/index.js为入口文件进行打包，打包后输出到./build/built.js；整体打包环境是生产环境。
看看这次的main.js就知道，生产环境下会压缩代码。

运行代码

1.node环境运行：

node ./build/built.js/main.js

2.新建一个html页面，src引入built.js/main.js文件，在浏览器控制台查看结果。

结论：

1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3.生产环境比开发环境多一个压缩js代码
复制代码

webpack打包样式资源

新建一个文件夹在vscode中打开，

因为webpack不能打包样式资源，所以需要借助loader,loader需要借助配置文件，新建一个配置文件,与src文件夹同级：webpack.config.js

webpack配置文件

作用：指示webpack干哪些活，当运行webpack时会加载里面的指令

配置内容：

const { resolve } = require('path')
module.exports = {
    // webpack配置

    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname node.js的变量，代表当前文件根目录的绝对路径
        // resolve 路径拼接
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            {
              // 匹配哪些文件
              test: /\.css$/,
              // 使用哪些loader进行处理
              use: [
                  // use数组中loader执行顺序：从右到左，从下到上依次执行
                  // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                  'style-loader',
                  // 将css文件变为common.js模块加载到js中，里面是样式字符串
                  'css-loader'

              ]
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
    ],
    // 模式
    mode: 'development' // 可选值： development、production
}
复制代码

在终端中：

npm init

npm i webpack webpack.cli -D

npm i css-loader style-loader
复制代码

运行：

webpack

新建index.html，浏览器运行测试一下：

打包

webpack

解析less文件

/* 
webpack.config.js:
    webpack的配置文件
    作用：指示webpack干哪些活，当运行webpack时会加载里面的指令

    所有构建工具(webpack就是其中一种)都是基于node.js运行的，模块化默认采用common.js

*/
const { resolve } = require('path')
module.exports = {
    // webpack配置

    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname node.js的变量，代表当前文件根目录的绝对路径
        // resolve 路径拼接
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            {
              // 匹配哪些文件
              test: /\.css$/,
              // 使用哪些loader进行处理
              use: [
                  // use数组中loader执行顺序：从右到左，从下到上依次执行
                  // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                  'style-loader',
                  // 将css文件变为common.js模块加载到js中，里面是样式字符串
                  'css-loader'

              ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件变为css文件,需要安装less-loader@7.3.0
                    'less-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
    ],
    // 模式
    mode: 'development' // 可选值： development、production
}
复制代码

测试：

webpack打包html资源–使用插件

/*
loader: 1.下载 2.配置使用
plugin: 1.下载 2.引入 3.配置使用 
 */
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {resolve} = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
        ]
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
        // html-webpack-plugin插件作用：默认创建一个空的html文件，自动引入我们要打包的所有资源
        new HtmlWebpackPlugin()

    ],
    // 模式
    mode: 'development' // 可选值： development、production
}
复制代码

webpack打包图片资源

const {resolve} = require('path')
const HtmlWebpackLoader = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {   // 问题： 默认处理不了html中img图片
                // 处理图片资源的loader
                test: /\.(png|jpg|gif)$/,
                // 使用多个loader用use数组，只有一个loader用loader属性
                // url-loader依赖于file-loader，所以要下载两个 
                loader: 'url-loader',
                options: {
                    // 设置在XKB大小以下的图片使用base64处理
                    // base64优点：减轻服务器压力
                    // base64缺点：会使图片体积变大,所以小图片用base64
                    limit: 12*1024
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackLoader({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}
复制代码

webpack打包其他资源

其他资源比如字体图标这些…不需要做任何处理，原封不动的输出。

module: {
        rules: [
            {
                // 打包其他资源
                exclude: /\.(css|js|less|html|img)$/,
                loader: 'file-loader'
            },
         }
复制代码