webpack 手摸手学习系列之配置 devServer 和配置开发环境

「爱情、让人受尽委屈。」 2023-02-12 11:20 4阅读 0赞

#### 一、webpack 配置 devServer ####

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`，通过 `npm install webpack-dev-server -D` 命令下载 `webpack-dev-server`。
2.  创建 `src` 文件目录，里面创建 `index.html` 和 `index.js` 文件，同时引入其它资源，比如字体图标，代码如下所示：

*  **index.js**
    
        import './iconfont.css';
        
        function add(x, y) { 
            return x + y;
        }
        
        console.log(add(1, 2));
        console.log(add(4, 8));
 *  **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>
        
            <div>hello webpack</div>
        </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` 开发模式。如果在每一次更改代码以后，都需要重新 `webpack` 打包一遍才能够看到最新的效果，比较麻烦，而 `webpack-dev-server` 可以解决实现自动更新。发服务器 `devServer`：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）。特点是只会在内存中编译打包，不会有任何输出。在 `devServer` 中，`contentBase` 是项目构建后路径，`compress` 是启动gzip压缩，`port` 是端口号，`open` 是自动打开浏览器，代码如下所示：

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',
        devServer: { 
            contentBase: resolve(__dirname, 'build'),
            compress: true,
            port: 3000,
            open: true
        }
    }

1.  在命令行输入 `npx webpack-dev-server` 命令，项目就会自动打包编译。每次在更改完代码后，自动编译看到最新的显示内容。

#### 二、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` 文件夹，在里面创建 `css`、`js`、`imgs` 和 `media` 文件夹，以及 `index.html`。`css` 文件夹中放 `index.less` 和字体图标资源样式，`js` 文件夹中放 `index.js`，`imgs` 文件夹中放图片资源，`media` 文件夹放字体图标的相关资源，代码如下所示：

*  **index.less**
    
        #box { 
            width: 200px;
            height: 200px;
            background-image: url('../imgs/angular.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
 *  **index.js**
    
        import '../css/iconfont.css';
        import '../css/index.less';
        
        function add(x, y) { 
            return x + y;
        }
        
        console.log(add(1, 2));
 *  **index.html**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>开发环境</title>
        </head>
        <body>
            <h1>开发环境配置</h1>
            <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>
            <div id="box"></div>
            <img src="./imgs/vue.jpg" alt="vue">
            <img src="./imgs/react.png" alt="react">
        </body>
        </html>

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 和 `html-webpack-plugin`，`entry` 是入口文件，`output` 是出口文件，`filename` 是打包输出后的文件名，`path` 是输出路径。`module` 是 `loader` 的配置，`rules` 是详细的 `loader` 配置。第一个规则是处理 `less` 资源，匹配以 `.less` 结尾的文件，使用的 `loader` 是 `style-loader`、`css-loader` 和 `less-loader`。第二个规则是处理 `css` 资源， 匹配以 `.css` 结尾的文件，使用的 `loader` 是 `style-loader` 和 `css-loader`。第三个规则是处理图片资源，匹配以 `jpg`、`png` 和 `gif` 结尾的文件图片资源，使用的 `loader` 是 `url-loader`，进行 `options` 配置，`limit` 是限制图片的大小小于`8kb`，就会被`base64`处理，给图片做优化，`name` 给图片做重命名，取 `hash` 值的前 `10` 位，取文件的原来扩展名，关闭 `es6` 模块化，输出路径为 `imgs`。第四个规则是 处理 `html` 中的 `img` 资源，匹配以 `.html` 结尾的文件，使用的 `loader` 是 `html-loader`。由于处理图片资源采用的是 `ES6 module` 解析，而 `html` 文件中的 `img` 资源使用 `commonJS` 解析，会造成冲突，需要关闭 `ES6 module`。第五个规则是处理其它资源，使用 `exclude` 不包括上面的所有资源，`html|css|js|less|jpg|png|gif`，使用 `file-loader`，通过 `options` 配置 `name` 的值为取 `hash` 值的前 `10` 位，取文件的原来扩展名，通过 `outputPath` 设置输出路径为 `media`。`plugins` 里面是一些插件配置，通过 `new HtmlWebpackPlugin()`，复制里面的文件，并自动引入打包输出的所有资源（`JS/CSS`），设置 `mode` 模式为 `development` 开发模式。在 `devServer` 中，`contentBase` 是项目构建后路径，`compress` 是启动 `gzip` 压缩，`port` 是端口号，`open` 是自动打开浏览器，代码如下所示：

const {  resolve } = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = { 
        entry: './src/js/index.js',
        output: { 
            filename: 'js/built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: [           
                {               
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                { 
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                { 
                    test: /\.(jpg|png|gif)$/,
                    loader: 'url-loader',
                    options: { 
                        limit: 8 * 1024,
                        name: '[hash:10].[ext]',
                        esModule: false,
                        outputPath: 'imgs'
                    }
                },
                { 
                    test: /\.html$/,
                    loader: 'html-loader'
                },
                { 
                    exclude: /\.(html|css|js|less|jpg|png|gif)$/,
                    loader: 'file-loader',
                    options: { 
                        name: '[hash:10].[ext]',
                        outputPath: 'media'
                    }
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            })
        ],
        mode: 'development',
        devServer: { 
            contentBase: resolve(__dirname, 'build'),
            compress: true,
            port: 3000,
            open: true
        }
    }

1.  在命令行输入 `npx webpack-dev-server` 命令，项目就会自动打包编译。每次在更改完代码后，自动编译看到最新的显示内容。在 `build` 打包文件中，也可以看到打包后的 `css`、`js`、`imgs` 和 `media` 文件夹，以及 `index.html`。