我们在打包JS文件的时候需要输入: ​​npx webpack index.js​​​, 这句指令的含义是: 利用 webpack 将 index.js 和它依赖的模块打包到一个文件中, 其实在 webpack 指令中除了可以通过命令行的方式告诉 webpack 需要打包哪个文件以外, 还可以通过配置文件的方式告诉 webpack 需要打包哪个文件,如果自己需要来手动的配置 webpack, 需要新建一个 ​​webpack.config.js​​ 文件,然后在该文件当中进行相关的配置

webpack配置文件_配置文件

webpack配置文件_配置文件_02

配置 ​​webpack​​ 有一种固定的格式

module.exports = {
// webpack相关配置信息
}

webpack 常见配置

  • entry: 指定需要打包的文件
  • output: 指定打包之后的文件输出的路径和文件名称
  • mode: 指定打包模式例如:​​development/production​
  • ​development​​: 不会压缩打包后的JS代码
  • ​production​​: 会自动压缩打包后的JS代码

自己配置 webpack 的方式来改写我们上一篇的自动打包,新建一个 ​​webpack.config.js​​ 内容如下图所示

const path = require("path");

module.exports = {
/*
mode: 指定打包的模式, 模式有两种
一种是开发模式(development): 不会对打包的JS代码进行压缩
还有一种就是上线(生产)模式(production): 会对打包的JS代码进行压缩
**/
mode: "development", // "production" | "development"

/*
entry: 指定需要打包的文件
**/
entry: "./index.js",

/*
output: 指定打包之后的文件输出的路径和输出的文件名称
**/
output: {

/*
filename: 指定打包之后的JS文件的名称
**/
filename: "bundle.js",

/*
path: 指定打包之后的文件存储到什么地方
**/
path: path.resolve(__dirname, "bundle")
}
};

添加了相关配置内容之后我们先来看看 ​​development​​ 模式也就是开发模式, 打包,可以看到下图中的命令我没有指定需要打包的文件名称,因为我们自己新建了一个 webpack 的配置文件他会自动的去解析我们配置的内容,我们已经在配置文件当中里面指定了所以就不用在指定了

webpack配置文件_配置文件_03

可以看到下图里面的内容没有被压缩

webpack配置文件_Webpack4+实现原理_04

在来看看 ​​production​​​ 生产模式, 修改 webpack 配置文件的 ​​mode​​ 属性即可

webpack配置文件_文件名_05

在重新打包一次命令不在贴了,查看打包之后的文件如下图,发现进行了压缩

webpack配置文件_js代码_06

本章节的内容到此结束,我们在继续往后看,主要介绍了自己来配置webpack的打包模式以及其他内容都可以自己去webpack官网进行查看即可