webpack的基本配置

### webpack的基本配置

1. 初始化项目 **npm init**

2. 创建各类需要打包的文件，**html、css、js **等

3. **创建 webpack.config.js 配置文件，其中有5大基本配置**

1. **entry** 入口文件，一般会引用 node 模块中的 path 来查找文件的路径，当需要配置多入口文件时，entry 需要以对象的形式存在，每一个入口名对应为一个 chunks 口，当模块需要使用不同的入口文件时需对应 chunks 。

```javascript
entry: {
main: ["@babel/polyfill", path.resolve(__dirname, '../src/index.js')], // 入口文件
hearder: path.resolve(__dirname,'../src/hearder.js')
}
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/index.html'),
filename:'dist-index.html',
chunks:['main'] // 与入口文件对应的模块名
}),
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/hearder.html'),
filename:'hearder.html',
chunks:['hearder'] // 与入口文件对应的模块名
})
]
```

2. 出口文件 **output**

```javascript
output: {
filename: 'build.js', // 可以自定义打包后的文件名
path: Path.resolve(__dirname, './dist') // 打包后的文件输出位置
}
```

3. **Module** 打包配置

- 解析 **html** 文档时，需要使用 **html-loader** 加载器，并且这个加载器使用的规范是 **es6** 规范，而 **webpack** 使用的是 **CMD**，所以需要在配置中关闭 **es6** 规范。否则会出错。

- 解析 **CSS** 资源时，需要引入相应的加载器解析。

- 解析 **CSS** 资源中的图片时，需要用到 **url-loader** 加载器，**url-loader** 加载器依赖于 **file-loader** 加载器。

```javascript
module: {
rules: [
// 解析 html 文档
{
test: /\.html$/,
loader: 'html-loader',
options: {
esModule: false // 关闭es6模块化规范
}
},
// 解析 sass 样式
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'] // 从右向左顺序解析
},
// 解析图片资源
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 4 * 1024,
esModule: false,
name: 'image/[hash:10].[ext]' // 对打包后的图片资源改名并存放于新建的image文件夹下
}
}
]
}
```

4. **mode** 开发模式

```javascript
mode: 'development' // 开发模式
mode: 'production' // 生产模式
```

5. 插件 **Plugin** 以数组形式存在，用到的插件需要在此配置下新建实例

```javascript
plugins: [
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, './src/index.html'),
filename: 'index_build.html'
})
]
```