webpack项目初始化

1、安装`webpack`;

说明：webpack是一个打包工具，可以通过插件配置打包各种文件，然后输出，但是输出的文件，我们需要自己引入html文件后才能使用(可以配置自动化注入)

在任意目录中新建一个web项目；
在创建好的文件夹中执行npm init来进行项目的初始化；
安装webpack到本项目中；
```
# 安装最新的稳定版
npm i -D webpack

# 安装指定版本；
npm i -D webpack@<version>
```
- 安装完成后我们可以执行一下命令来运行webpack；
```
# 1、直接运行
node_modules/.bin/webpack

# 2、设置脚本命令运行；
"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "start": "webpack"
},
```
  此时执行你会出现这种提示；
  
  No configuration file found and no output filename configured via CLI option.
  A configuration file could be named 'webpack.config.js' in the current directory.
  Use --help to display the CLI options.
  
  翻译：没有找到配置文件，也没有通过CLI选项配置输出文件名。
  
  配置文件可以命名为“webpack.config”。js'在当前目录中。
  
  使用——help显示CLI选项。

根据提示我们新建webpack.config.js文件；内容如下：

const path = require('path')
module.exports = {
  // 配置入口文件
  entry: './main.js',
  // 配置输入文件名和路径
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

此时在执行脚本，webpack便会进行打包并在当前目录多出一个dist文件夹，即为webpack的输入文件，

webpack项目初始化

1、安装webpack;

1、安装`webpack`;