入门 webpack配置_webpack option中添加如下配置-CSDN博客

本文链接：https://blog.csdn.net/weixin_43599856/article/details/121274580

目前的 node v14.17.3，npm 6.14.13。

1. package.json

新建一个空文件夹，用vscode打开，在新建的终端中输入 npm init -y 生成默认的package.json。

2. webpack.config.js

需要安装的开发依赖：

npm i webpack webpack-cli -D
npm i html-webpack-plugin@4 -D
npm i webpack-dev-server -D

根目录下新建main.js，内容可以随意，比如：

// main.js
console.log("hello webpack");

根目录下新建public/index.html，内容随意，比如：

<body>
    <div id="app">
        <h3>Hello World.</h3>
    </div>
</body>

根目录下新建webpack.config.js，基本配置如下：

let path = require("path");
let htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // 入口
    entry: "./main.js",
    // 出口
    output: {
        path: path.resolve(__dirname, "dist")
    },
    // 环境
    mode: "development",

    resolve: {
        // 别名(短路径配置)
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    },
    // 开发服务
    devServer: {
        open: true,
        port: 9000
    },
    // 插件
    plugins: [
        new htmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
};

在package.json的scripts中添加上：

scripts: {
    "start": "webpack-dev-server"
}

终端运行 npm run start ，将自动打包，到浏览器运行。

3. Less

需要安装的开发依赖：

npm i style-loader@2 css-loader@5 -D
npm i less less-loader@6 -D

在webpack.config.js中需要配置：

module.exports = {
    // ...
    // 模块
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            }
        ]
    }
};

在main.js中导入src/style.less，如下：

// main.js
import "@/style.less";

/* src/style.less */
#app {
    margin: 50px;
    h3 {
        color: red;
    }
}

最后，再 npm run start，查看页面运行的结果。

4. 问题

1) 报错出现getOptions的错误：

一般是css-loader、style-loader、less或者less-loader版本不兼容；

2) 报错有个'tap' of undefined及NodeTemplatePlugin错误：

因为html-webpack-plugin、webpack版本高了；

3) 报错Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError错误：

必须把style-loader放在css-loader之前。

ps：本人是从官网及借鉴前人经验解决报错信息，特此感谢；另外文中步骤或描述若有错误之处，烦请留言指正。