Webpack 的基础配置学习系列1

19 阅读2分钟

webpabck 导读

使用 webpack 进行工程化开发

一、初始化包和安装 webpace

  • 在当前项目里初始化一个包的描述文件

yarn init -y

  • 安装 webpack 工具

yarn install webpack@4 webpack-cli@3 --save--dev

二、核心项基础配置

新建 webpack.config.js 配置文件,并配置基础的选项


// 配置文件

// 注意:只能使用commonjs模块化的规范语法

const path = require('path')
module.exports = {
    // 入口
    entry: "./src/main.js",
    // 出口
    output: {
        // 打包后的文件名
        filename: 'js/app.js',
        // 打包文件的输出路径
        path: path.resolve(__dirname, "dist")
    },
    // loader(加载器、css、sass、等等)
    
    // plugins(插件配置)
    
    // 模式: 开发模式(development),生产模式(production)
    mode: "development"
}

安装加载器 css-loaderstyle-loader


yarn add style-loader@1.1.3 css-loader@3.4.2 -D

  • 配置加载器

参考地址:webpack-loader


module.exports = {
...
// loader(加载器、css、sass、等等)
    module: {
        // 配置具体的加载器
        rules: [
            // 每个对象,处理一种文件
            {
                // 指定文件的格式,正则格式
                test: /\.css$/i,
                // 注意:加载顺序从右到左
                use: ["style-loader", "css-loader"]
            }
        ]
    },
}

安装 HtmlWebpackPlugin插件来创建html文件

参考地址:HtmlWebpackPlugin


yarn add html-webpack-plugin@3.2.0 -D

  • 配置插件并指定html模版
  • 在根目录下创建public/index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpace dome</title>
</head>
<body>
<div id="app">
<h1>Hello Webpack</h1>
</div>
</body>
</html>

  • 配置插件
// 生成html文件的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
}

配置图片

  • 安装 url-loaderfile-loaderhtml-loader

url-loader 可以限制超过指定大小的图片参与打包,否则直接转为base64编码 html-loader 解决在html模版中使用img标签是src引用路径,打包后的路径错误问题

yarn add file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5 -D
  • 情况1: 限制超过指定大小的图片参与打包,否则直接转为base64编码,此时需要用到url-loader
  • 配置 url-loader
module.exports = {
...
    module: {
        rules: [
        ...
            // 处理 图片文件
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                        {
                        // 指定具体的loader
                        loader: "url-loader",
                        // 配置选项
                        options: {
                            // 指定打包后的文件名称;
                            // img/:表示打包后的文件夹名称 [name]:表示采用文件原来的名称,[ext]:表示原来的扩展名 [hash:8]: 表示返回8位哈希值
                            name: "img/[name].[hash:8].[ext]",
                            // 配置超过指定大小的图片参与打包,否则直接转为base64编码
                            limit: 1024 * 4, // 超过4kb大小的图片参与打包
                            // url-loader 默认采用es6模块化,html-loader 采用commonjs模块化,
                            // 为了让html模版中直接引入的图片可以正常显示,这里要关闭es6模块化
                            esModule: false,
                        },
                    },
                ],
            },
        ]
    }
}
  • 情况2: 在html模版中引用的图片资源或在css中设置 background: url('引用的图片资源'),此时需要用到html-loader

module.exports = {
    ...
    module: {
        rules: [
            ...
            // 处理 html 文件中的图片资源
            {
                test: /\.html$/i,
                use: ["html-loader"],
            },
        ]
    }
}

分割Js中的Css

  • 安装mini-css-extract-plugin 插件
yarn add mini-css-extract-plugin@0.9.0 -D
  • 配置插件

// 引入独立生成css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    ...
    // plugins(插件配置)
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        }),
        ...
    ],
}
  • 使用插件的 loader
module.exports = {
    module: {
        // 配置具体的加载器, 每个对象,处理一种文件
        rules: [
            // 处理 css 文件
            {
                // 指定文件的格式,正则格式
                test: /\.css$/i,
                // MiniCssExtractPlugin.loader 替换 style-loader
                use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // 设置css文件中获取资源的路径
                                publicPath: '../'
                            }
                        },
                        "css-loader"
                ],
            },
        ],
    },
    ...
}

使用开发服务器实现开发中的查看运行结果

  • 安装插件
yarn add webpack-dev-server@3.10.3 —D
  • 配置插件
module.exports = {
    ...
    // 配置 webpack-dev-server
    devServer: {
        port: 8848,
    },
}
  • package.json中配置脚本命令
{
    ...
    "scripts": {
        "dev": "webpack-dev-server --open",
        "build": "webpack"
    },
}
  • 执行命令

yarn dev

项目源码 webpack-dome github地址

注意在安装依赖的时候请使用文章中指定的版本,避免出现一些不兼容或其他的问题

如果文章对您有所帮助,请您点个赞,你的支持就是我最大的动力