webpack 手摸手学习系列之打包样式资源、html 资源、图片资源和其它资源

柔光的暖阳◎ 2023-02-12 05:55 9阅读 0赞

#### 一、webpack 打包样式资源 ####

1.  创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm install webpack webpack-cli -g` 命令全局下载 `webpack` 和 `webpack-cli`，通过 `npm install webpack webpack-cli -D` 命令本地下载 `webpack` 和 `webpack-cli`，通过 `npm i style-loader css-loader -D` 命令下载 `style-loader` 和 `css-loader`，通过 `npm i less less-loader -D` 命令下载 `less` 和 `less-loader`。
2.  创建 `src` 文件夹，在里面创建 `index.css`、`index.less` 和 `index.js` 文件，创建 `build` 文件夹，里面创建 `index.html`，代码如下所示：

*  **index.css**
    
        html, body{ 
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: pink;
        }
 *  **index.less**
    
        #title { 
            color: #fff;
        }
 *  **index.js**
    
        import './index.css'
        import './index.less'
 *  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>webpack</title>
        </head>
        <body>
            <h1 id="title">title less</h1>
            <script src="./built.js"></script>
        </body>
        </html>

1.  在主目录创建 `webpack.config.js` 文件，`webpack.config.js` 是 `webpack` 的配置文件，作用是指示 `webpack` 干哪些活（当你运行 `webpack` 指令时，会加载里面的配置），所有构建工具都是基于`nodejs` 平台运行的~模块化默认采用 `commonjs`。`entry` 是入口起点，`output` 是输出， `filename` 是输出文件名，`path` 是输出路径，`__dirname` `nodejs` 的变量，代表当前文件的目录绝对路径。`module` 是 `loader` 配置，`rules` 是详细 `loader` 配置，不同文件必须配置不同 `loader` 处理。`test` 是 匹配哪些文件，比如以 `.css` 结尾的文件。`use` 是使用哪些 `loader` 进行处理，`use` 数组中`loader`执行顺序：从右到左，从下到上 依次执行。`style-loader` 是创建`style`标签，将`js`中的样式资源插入进行，添加到`head`中生效。`css-loader` 是将 `css` 文件变成 `commonjs` 模块加载 `js` 中，里面内容是样式字符串。如果是处理 `less` 文件，那么就需要 `less-loader`，将 `less` 文件编译成 `css` 文件，然后再加入编译 `css` 文件所需要的 `style-loader` 和 `css-loader`。`plugins` 是 `plugins` 的配置，里面是详细 `plugins` 的配置。`mode` 是模式，指定是 `development` 还是 `production`，代码如下所示：

const {  resolve } = require('path');
    
    module.exports = { 
        entry: './src/index.js',
        output: { 
            filename: 'built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/,
                    use: [                   
                        'style-loader',
                        'css-loader'
                    ]
                },
                { 
                    test: /\.less$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'less-loader'
                    ]
                }
            ]
        },
        plugins: [],
        mode: 'development'
    }

1.  在命令行输入 `webpack` 命令，样式资源就会进行打包，同时在 `build` 文件夹中，多出一个 `built.js` 的打包输出文件。同时，还可以打开 `index.html`，发现样式也已经生效了。

#### 二、webpack 打包 html 资源 ####

1.  创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm install webpack webpack-cli -g` 命令全局下载 `webpack` 和 `webpack-cli`，通过 `npm install webpack webpack-cli -D` 命令本地下载 `webpack` 和 `webpack-cli`，通过 `npm i html-webpack-plugin -D` 命令下载 `html-webpack-plugin` 插件。
2.  在项目文件中，创建 `src` 文件夹，里面创建 `index.js` 和 `index.html` 文件，代码如下所示：

*  **index.js**
    
        function add(x, y) { 
            return x + y;
        }
        
        console.log(add(2, 3));
 *  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=q, initial-scale=1.0">
            <title>webpack</title>
        </head>
        <body>
            <h1 id="title">hello webpack</h1>
        </body>
        </html>

1.  在主目录，创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 和 `html-webpack-plugin`。`entry` 是入口文件，`output` 是出口文件，`filename` 是打包输出后的文件名，`path` 是输出路径。`module` 是 `loader` 的配置，`rules` 是详细的 `loader` 配置。`plugins` 里面是 `plugins` 的配置。`html-webpack-plugin` 是默认会创建一个空的 `HTML`，自动引入打包输出的所有资源（`JS/CSS`）。如果只使用 `HtmlWebpackPlugin()`，那么就会在 `build` 中自动生成一个 `index.html`，是无结构的 `html`文件。如果需要有结构的 `HTML`文件，那么就需要配置 `HtmlWebpackPlugin`的 `template`，复制里面的文件，并自动引入打包输出的所有资源（`JS/CSS`）。mode 是设置模式，`development` 是开发模式，代码如下所示：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
        entry: './src/index.js',
        output: { 
            filename: 'built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: []
        },
        plugins: [ 
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            })
        ],
        mode: 'development'
    }

1.  在命令行输入 `webpack` 命令， html 资源就会进行打包，同时在 `build` 文件夹中，多出一个 `built.js` 的打包输出文件。同时，还可以打开 `index.html`，发现样式也已经生效了。

#### 三、webpack 打包图片资源 ####

1.  创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm install webpack webpack-cli -g` 命令全局下载 `webpack` 和 `webpack-cli`，通过 `npm install webpack webpack-cli -D` 命令本地下载 `webpack` 和 `webpack-cli`，通过 `npm i style-loader css-loader -D` 命令下载 `style-loader` 和 `css-loader`，通过 `npm i less less-loader -D` 命令下载 `less` 和 `less-loader`，通过 `npm i html-webpack-plugin -D` 命令下载 `html-webpack-plugin` 插件，通过 `npm i url-loader file-loader -D` 命令下载 `url-loader` 和 `file-loader`，通过 `npm i html-loader -D` 命令下载 `html-loader`。
2.  创建 `src` 文件夹，创建 `index.js`、`index.less` 和 `index.html` 文件，并且引入所需的三张图片资源，代码如下所示：

*  **index.less**
    
        #box1{ 
            width: 100px;
            height: 100px;
            background-image: url('./vue.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        
        #box2{ 
            width: 200px;
            height: 200px;
            background-image: url('./react.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        
        #box3{ 
            width: 300px;
            height: 300px;
            background-image: url('./angular.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
 *  **index.js**
    
        import './index.less'
 *  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>webpack</title>
        </head>
        <body>
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
            <img src="./angular.jpg" alt="angular">
        </body>
        </html>

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 和 `html-webpack-plugin`，`entry` 是入口文件，`output` 是出口文件，`filename` 是打包输出后的文件名，`path` 是输出路径。`module` 是 `loader` 的配置，`rules` 是详细的 `loader` 配置。第一个规则是通过 `test` 匹配以 `.less` 结尾的文件，通过 `use` 去使用 `loader`，里面是数组，使用 `style-loader`、`css-loader` 和 `less-loader`。第二个规则是通过 `test` 匹配以 `jpg`、`png` 和 `gif` 结尾的图片资源，使用 `url-loader`，`url-loader` 依赖于 `file-loader`。进行 `options` 配置，设置 `limit` 为 `8 * 1024`，图片大小小于 `8kb`，就会被 `base64` 处理，给图片做优化。这样做的优点是减少请求数量（减轻服务器压力），缺点是图片体积会更大（文件请求速度更慢）。设置 `esModule` 为 `false`，由于 `url-loader` 默认使用 `es6` 模块化解析，而 `html-loader` 引入图片是 `commonjs` ，解析时会出问题为 `[object Module]`，所以关闭 `url-loader`的 `es6` 模块化，使用`commonjs` 解析。设置 `name` 为 `[hash:10].[ext]`，给图片进行重命名，因为图片值为 `hash`，`[hash:10]` 取图片的 `hash` 的前 `10` 位，`[ext]`取文件原来扩展名。第三个规则是匹配以 `.html` 结尾的文件，使用 `loader` 为 `html-loader`，处理 `html` 文件的 `img` 图片（负责引入 `img`，从而能被 `url-loader` 进行处理）。`plugins` 里面是一些插件配置，通过 `new HtmlWebpackPlugin()`，复制里面的文件，并自动引入打包输出的所有资源（`JS/CSS`），设置 `mode` 模式为 `development` 开发模式，代码如下所示：

const {  resolve } = require('path')
    const HtmlWebpackPlugin = 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'
                    ]
                },
                { 
                    test: /\.(jpg|png|gif)$/,
                    loader: 'url-loader',
                    options: { 
                        limit: 8 * 1024,
                        esModule: false,
                        name: '[hash:10].[ext]'
                    }
                },
                { 
                    test: /\.html$/,
                    loader: 'html-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            })
        ],
        mode: 'development'
    }

1.  在命令行输入 `webpack` 命令，样式资源就会进行打包，同时在 `build` 文件夹中，多出一个 `built.js` 的打包输出文件。同时，还可以打开 `index.html`，发现样式也已经生效了，图片资源也能够正常显示。

#### 四、webpack 打包其它资源 ####

1.  创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm install webpack webpack-cli -g` 命令全局下载 `webpack` 和 `webpack-cli`，通过 `npm install webpack webpack-cli -D` 命令本地下载 `webpack` 和 `webpack-cli`，通过 `npm i style-loader css-loader -D` 命令下载 `style-loader` 和 `css-loader`，通过 `npm i html-webpack-plugin -D` 命令下载 `html-webpack-plugin` 插件，通过 `npm install file-loader -D` 命令下载 `file-loader`。
2.  创建 `src` 文件目录，里面创建 `index.html` 和 `index.js` 文件，同时引入其它资源，比如字体图标，代码如下所示：

*  **index.js**
    
        import './iconfont.css';
 *  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>webpack</title>
        </head>
        <body>
            <span class="iconfont icon-icon-test"></span>
            <span class="iconfont icon-icon-test2"></span>
            <span class="iconfont icon-icon-test3"></span>
            <span class="iconfont icon-icon-test1"></span>
        </body>
        </html>

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 和 `html-webpack-plugin`。`entry` 是入口文件，`output` 是出口文件，`filename` 是打包输出后的文件名，`path` 是输出路径。`module` 是 `loader` 的配置，`rules` 是详细的 `loader` 配置。第一个规则是匹配以 `.css` 结尾的文件，使用的 `loader` 是 `style-loader` 和 `css-loader`。第二个规则是打包其他资源(除了`html/js/css`资源以外的资源)，通过 `exclude` 排除`css/js/html`资源，使用的 `loader` 是 `file-loader`。由于打包后得到的是 `hash` 值，名称很长，所以进行 `options` 配置，将 `name` 的名字设置为 `[hash:10].[ext]`，取 `hash` 前 `10` 位并且文件原来的扩展名。`plugins` 里面是一些插件配置，通过 `new HtmlWebpackPlugin()`，复制里面的文件，并自动引入打包输出的所有资源（`JS/CSS`），设置 `mode` 模式为 `development` 开发模式，代码如下所示：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
        entry: './src/index.js',
        output: { 
            filename: 'built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader']
                },
                { 
                    exclude: /\.(css|js|html)$/,
                    loader: 'file-loader',
                    options: { 
                        name: '[hash:10].[ext]'
                    }
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            })
        ],
        mode: 'development'
    }

1.  在命令行输入 `webpack` 命令，样式资源就会进行打包，同时在 `build` 文件夹中，多出一个 `built.js` 的打包输出文件。同时，还可以打开 `index.html`，发现字体样式也已经生效了，其它资源也能够正常显示。