携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

webpack入门配置

新建项目目录 test
初始化项目，终端执行 npm init -y
创建项目结构文件 src/index.js 、src/index.css、src/index.html、webpack.config.js
安装 webpack 和 webpack-cli，终端执行 npm i webpack webpack-cli

在 webpack.config.js 中添加如下配置：

const path = require('path');

module.exports = {
    entry: {
        home: "./src/index.js"
    },
    output: {
        path: path.join(__dirname, './dist'), //出口路径必须是绝对路径
        // name是入口文件的key
        // hash随机生成的字符串
        filename: "[name].[hash].bundle.js",
        clean: true, // 每次打包都会删除上次打包的文件
    },
    // development:开发模式
    // production:生产模式
    mode: "development"
}

在 index.js 中随便添加一些打印语句，终端执行 webpack ，查看打包结果。

这时 dist 目录中就生成了一个 js 文件

webpack基础配置

在 package.json 中，配置 npm run build命令，配置成功就可以使用 npm run build 打包项目了。

……
"scripts": {
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
},
……

在 index.html 中写入

<div class="box">
    hello world!
</div>

在 index.css 中写入

.box{
    width: 100px;
    height: 100px;
    background-color: orange;
    text-align: center;
    line-height: 100px;
    color: white;
}

在 index.js 中导入css文件，因为 webpack 默认只能打包 js 和 json 文件，所以在打包 html 和 css 文件时，还需要下载插件和 loader
```
import “./index.css”
```
下载打包 html 文件的插件，在终端执行 npm i html-webpack-plugin ；下载打包 css 文件 loader，npm i style-loader css-loader

在 webpack.config.js 中，写入打包 html 和 css 文件的配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    ……原有代码……
    module: {
        rules: [
            {
                test: /.css$/,
                use: ["style-loader", "css-loader"]
            }
        ],
    }
    plugins: [
        //创建一个实例，打包html文件
        new HtmlWebpackPlugin({
          //以路径中的文件为模板
          template: "./src/index.html",
          filename: "index.html",
          inject: "body",
       })
   ],
}

终端执行 npm run build 编译打包

这时发现 dist 目录中生成了 html 和 js 文件，但是 css 文件被打包进 js 文件了，所有这时要把 css 文件独立出来。
下载插件，终端执行 npm i mini-css-extract-plugin

MiniCssExtractPlugin 插件会将 css 提取到单独的文件中，为每个包含 css 的 js 文件创建一个 css 文件，支持 css 和 SourceMaps 的按需加载。

在 webpack.config.js 中，添加配置：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//在plugins数组中创建实例
new MiniCssExtractPlugin({
    filename: "index.css",
})

//修改rules数组中打包css文件的对象
{
    test: /.css$/,
    use: [MiniCssExtractPlugin.loader, "css-loader"]
}

将 mode 模式修改为 production，终端执行 npm run build

dist目录下成功生成了index.css文件，但是在生产模式下，html 和 js 文件都被打包成了一行一代码，css文件却没有，所有需要使用插件让css文件也被打包成一行代码。
下载插件，终端执行 npm i css-minimizer-webpack-plugin

这个插件使用 cssnano 优化和压缩 CSS。

在 webpack.config.js 中，添加配置：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//module.exports后面的对象中添加配置
optimization: {
    minimizer: [
        // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`）
        `...`,
        new CssMinimizerPlugin(),
    ],
},

在终端执行 npm i build

dist目录下的三个文件都可以被压缩了。
下载webpack服务器，在终端执行 npm i webpack-dev-server

可以在本地创建一个web服务器，将webpack与提供实时重新加载的开发服务器一起使用。这应该仅用于开发。

在 webpack.config.js 中，添加配置：

//module.exports后面的对象中添加配置
devServer: {
    static: {
        directory: path.join(__dirname, './dist'),
    },
    //使用gzip压缩
    compress: true,
    port: 8080,
},

终端执行 webpack serve

执行成功后会创建一个本地服务器，在http://localhost:8080就能访问自己创建的页面了。

在 package.json 中，配置 npm run serve命令，配置成功就可以使用 npm run serve 启动项目了。

……
"scripts": {
    "serve": "webpack serve",
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
},
……

webpack配置从入门到放弃（1）

webpack入门配置

webpack基础配置