webPack vue脚手架的构成，进来就能入门

最新推荐文章于 2024-07-17 16:53:29 发布

Brooke_w

最新推荐文章于 2024-07-17 16:53:29 发布

阅读量127

点赞数

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/Brooke_w/article/details/128176656

版权

点击这里可以了解更多关于webPack的官方知识

本篇需要理解一些核心概念：

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

webpack.config.js

module.exports = {
  entry: './src/index.js' //打包文件
};

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

var path = require("path")
module.exports = {
    entry: "@/index.js" //打包文件
    output: {
        filename: "[name].bundle.js", //指明打包成果文件名
        path: path.resolve(__dirname, 'dist'), //指明打包成果文件目录
        clean: true,//清理dist下无用的文件夹
    },
}

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

在 webpack 的配置中 loader 有两个属性：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

webpack.config.js

var path = require("path")
module.exports = {
    entry: "@/index.js" //打包文件
    output: {
        filename: "[name].bundle.js", //指明打包成果文件名
        path: path.resolve(__dirname, 'dist'), //指明打包成果文件目录
        clean: true,//清理dist下无用的文件夹
    },
   module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },
}

插件(plugin)

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。使用前都需要使用npm先进行安装再引用。

webpack.config.js

var path = require("path")
//css剥离插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    entry: "@/index.js" //打包文件
    output: {
        filename: "[name].bundle.js", //指明打包成果文件名
        path: path.resolve(__dirname, 'dist'), //指明打包成果文件目录
        clean: true,//清理dist下无用的文件夹
    },
   module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            //打包模板
            template: "./public/index.html",
            inject: "body"
        }),
        new MiniCssExtractPlugin()
    ],
}

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: 'production'
};

但是一般不在这里进行配置，会在package.josn文件中scripts属性下方进行配置生产环境和开发环境。

package.josn

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "serve": "webpack serve --mode development"
  },