webpack 初识配置文件

引言

不知道你思考过一个问题没有，我们在使用vue和react脚手架创建的项目中，并没有见到个webpack的出现，这是为什么？

这是因为它们都内置了webpack，所以并不需要我们去添加webpack的配置。但是我们还是要了解webpack的。

初始化

首先，创建一个项目。

package.json怎么生成的？

新建一个文件夹，然后进入到文件夹中。执行 npm init，然后会让你添加如下图的一些配置，可以不填，一顿回车就好。

image.png

最后会发现生成了一个package.json文件，项目名称、版本、描述就不多说了。

• main配置对应的是项目主文件，也就是项目会先执行index.js文件的内容。
• repository是因为我添加了git，对应这个git的配置。
• devDependencies 是开发环境的依赖内容，因为如下的webpack-cli和webpack我们只有打包的时候才用(这一步我们还没有安装，后面安装)，生产环境并不需要。

{
  "name": "webpack_emo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:yang-yiming1234/webpack_emo.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^4.10.0",
    "webpack": "^5.73.0"
  }
}

安装webpack依赖

--dev就是说我要把这个依赖包添加到开发环境中。

npm install --save-dev webpack
yarn add webpack --dev

npm install --save-dev webpack-cli
yarn add webpack-cli --dev

webpack打包

刚才上面的 package.json 中，我们提到了"main"配置项去找主文件index.js。

这个index.js实际上是在src文件夹下的，如下图我们新建src文件夹，在其下面新建index.js

image.png

在index.js中，我们随便写点东西

const test =(a,b)=>{
    return  a*b
}
console.log(11)

然后进行打包执行

npx webpack

npx

详细介绍：阮一峰的博客

简述： 是node中自带的，可以算是npm的升级版。

image.png

打包完成后会默认创建一个dist文件夹，并在文件夹下有一个main.js文件。

image.png

可以发现我们写的函数，并没有被打包编译。这是因为webpack5.0的版本需要指定一下是什么模式(mode)。

指定模式(mode)

webpack官网： ✈️

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

string = 'production': 'none' | 'development' | 'production'

我们现在是直接用Cli 运行的，只需要指定mode为开发环境(这里不用太在意，后面我们会在webpack配置文件中添加)。

npx webpack --mode=development

再次执行完命令，可以看到我们的函数也被编译了，并且多个很多注释。

image.png

改变入口文件

我们说过，src下的index.js是项目的入口文件，那么我们如果给他换个名字会怎么样？

把index.js改名为main.js，然后再执行

npx webpack --mode=development

image.png

因为没有找到入口文件，所以报了上面的错，那么其实我们可以指定入口文件。可以通过--entry来指定入口文件。

npx webpack --entry ./src/main.js --mode=development

改变输出文件

既然可以指定入口文件，那么编译后的dist目录可以改变吗？当然可以。

通过--output-path指定输出路径

npx webpack --entry ./src/main.js --output-path ./build --mode=development

现在输出的文件夹就是build了

image.png

webpack配置

我们上面都是执行的命令，但是我们不能每次执行都输入那么长的命令。因此就需要webpack的配置文件了。

新建webpack.config.js(约定俗成的名字)。然后通过module.exports来导出配置项。

image.png

入口/输出

不要忘了把src下的index.js文件的名字改回来。我们在webpack.config.js中添加entry和output配置。

• entry 的值为 入口文件的路径
• output 是一个对象，filename是输出(打包后)的文件名，path是打包后的路径

module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: './dist'
    },
}

package.json

在 package.json的scripts中添加webpack的运行命令，我们就不要执行那么长的命令了，也不需要使用npx了，接下来就可以使用npm run build 来运行了。

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

但是我们又发现了如下错误：这是因为output的path需要的是绝对路径。

image.png

path模块

这是node.js中的path模块。

const path = require('path')
module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname,'dist')
    },
}

再去执行 npm run build 可以看到生成dist文件夹，以及build.js文件。

image.png

添加git忽略文件

我在gitee创建了仓库，然后用 git clone xxx 到当前项目中

新建 .gitignore 文件

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*