webpack配置文件写法

1.什么是webpack配置文件?

我们在打包JS文件的时候需要输入: npx webpack index.js
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行(终端)的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件

2.webpack常见配置

在https://www.webpackjs.com/configuration/网站中,打开官方文档中的中文文档——配置,可查看详细内容

  • 2.1.在项目中新建webpack.config.js文件

  • 2.2.按照webpack网站中的固定格式,写配置文件webpack.config.js
    mode: 打包模式 development(不压缩)/production(压缩)
    entry: 需要打包的文件
    output: 打包之后输出路径和文件名称

  • webpack.config.js

const path = require("path");
module.exports = {
    /*
    mode:指定打包的模式,模式有两种
        一种是开发模式(development):不会对打包的JS代码进行压缩
        另一种是上线(生产模式)模式(production)会对打包的JS代码进行压缩
    */
    mode: "production", // "production" | "development" | "none"
    /*
    entry:指定需要打包的文件
    */
    entry: "./index.js", // string | object | array
    /*
    output:指定打包之后的文件输出的路径和输出的文件名称
    * */
    output: {
        //filename:指定打包之后的JS文件的名称
        filename: "bundle.js", // string
        //path:指定打包之后的文件存储到什么地方,需要使用NodeJS的path模块
        path:path.resolve(__dirname, "bundle")
    }
};
  • 2.3.打开terminal,进入项目文件夹。自动查找配置文件进行打包:npx webpack。即可完成使用配置文件打包模块
    打包文件
    打包结果
3.webpack配置文件注意点
  • 3.1.webpack配置注意事项
    配置文件的名称必须叫做: webpack.config.js, 否则直接输入 npx webpack打包会出错
    如果要使用其它名称, 那么在输入打包命令时候必须通过 --config 指定配置文件名称
    npx webpack --config xxx
    指定配置文件名称为nj.js
  • 3.2.打包命令简化
    每次输入npx webpack --config xxx来打包文件会有一点蛋疼, 所以我们可以通过npm script(关于script,详见package.json各字段含义)来简化这个操作
    编写package.json文件,简化打包
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页