webpack常用配置（一）之搭建环境及初始化配置

学习webpack配置首先第一步是搭建一个环境
我在D盘下新建了一个文件夹webpack_project，进入文件目录后打开终端，输入：

npm install -y

输入完命令后会看到文件夹中出现了一个package.json文件，文件里有一个

"main":"index.js"//入口文件

然后我们需要安装webpack和webpack-cli，安装的时候需要注意安装的版本，我这里安装的是webpack4版本，如果是版本5后面的写法会有一些不一样。

npm i webpack -D
npm i webpack-cli -D

安装完成以后需要新建一个入口文件，在根目录下新建src文件夹，然后在src文件夹中新建index.js文件，可以在index.js中随便写一段代码，方便一会打包的时候看。

接下来配置webpack的入口，出口以及模式
在根目录下新建一个文件webpack.config.js,写入以下代码

const path=require('path')
module.exports={
  mode:'development',
  entry:path.join(__dirname,'src'，'index.js'),
  output:{
    filename:bundle.js,
    path:path.join(__dirname,'dist')
  }
}

写完以后需要去package.json中配置一下build的命令：

"scripts":{
  "build":"webpack"
}

然后在终端输入npm run build,会看到目录里出现了一个dist文件夹，下面有bundle.js文件