第七节:Webpack开发环境配置

前言:

1. 之前所学些的,每次都需要手动的打包,
2. 如果现在修改了开发代码以后,页面不会有任何变化,
3. 原因在于,页面显示的内容是打包后的文件内容

因此我们需要搭建一个开发环境, webpack提供了一个devServer帮我们搭建开发环境

1. devServer认识理解

1.1 为什么需要devServer

1. 在开发是,可能随时需要调整代码内容
2. 因此我们希望我们调整的内容可以实时的显示在页面上,有利于开发调试
3. 当一切都开发完毕了以后在最终打包上线

1.2 对于devServer的理解

1. devServer是webpack提供的一个开发服务器,
2. devServer会自动化构建:自动编译,自动打开浏览器,自动刷新浏览器
3. devServer的特点是在内存中编译打包,不会生成任何打包文件,
4. 因此当关闭devServer时,会自动清理内存,在开发阶段非常有用

2. 配置devServer

devServer需要通过webpack-dev-server运行,所以我们需要下载这个包

2.1 下载webpack-dev-server

$ yarn add webpack-dev-server -D

2.2 配置devServer

代码如下:

const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")


module.exports = {
    entry: "./src/main.js",
    output: {
        filename:"bundle.js",
        path:resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ],
    mode:"development",

    // devServer配置
    devServer:{
        // 项目构建后的路径
        contentBase: resolve(__dirname,"dist"),
        // 启动gzip压缩
        compress:true,
   
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open:true
    }
}

2.3 配置运行脚本

在package.json

{
    ...
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server"
    },
    ...
}

一切就绪以后,就可以用在控制台,通过npm run dev来启动devServer了

一但服务启动成功,我们在开发区域写的任何内容都会实时编译到浏览器上

3. 首先是将前面所学的内容全部配置

webpack配置代码如下

// 引入依赖
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")


// webpack 配置
module.exports = {
    // 入口
    entry: "./src/main.js",
    // 出口
    output: {
        filename:"bundle.js",
        path: resolve(__dirname,"dist"),
    },
    // loader配置
    module: {
        rules:[
            // css 
            { 
                test: /\.css$/,
                use:["style-loader","css-loader"]
            },
            // less
            { 
                test: /\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
            // 样式图片
            { 
                test: /\.(png|jpg|gif)$/,
                loader:"url-loader", 
                 // url-loader是在file-loader的基础上封装
                // 可以处理为base64图片
                options:{
                    limit: 8 * 1027,
                    name: "[hash:8].[ext]",
                    esModule:false
                }
            },
            // html 中img 引入图片
            { 
                test: /\.html$/,
                loader:"html-loader",
            },

            // 其他资源
            { 
                exclude: /\.(html|css|less|js|png|jpg|gif)$/,
                loader:"file-loader",
                options: {
                    name: "[hash:8].[ext]"
                }
            }
        ]
    },
    // plugin 配置
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode:"development",
    // 开发环境
    devServer:{
        contentBase: resolve(__dirname,"dist"),
        compress: true,
        port: 3000,
        open: true
    }

}

4. 配置不同文件的目录

4.1 说明

配置不同输出目录说明:

1. 通过上面配置成功打包的结果来看, 使用没有问题

2. 此时打包的目录都在同一个文件中,这样非常不好

3. 开发时常将不同的文件放在不同的目录中,打包时,也希望不同的文件打包到不同的目录中

4.2 配置输出目录

因此我们需要在配置不同文件打包的loader时配置不同的出口目录

配置图片输出的路径

{ 
    test: /\.(png|jpg|gif)$/,
    loader:"url-loader", 
    options:{
        limit: 8 * 1027,
        name: "[hash:8].[ext]",
        // 配出图片输出的路径
        outputPath: "imgs"
    }
}