# webpack-starter

**Repository Path**: huangjunquan/webpack-starter

## Basic Information

- **Project Name**: webpack-starter
- **Description**: webpack学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-08
- **Last Updated**: 2021-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack

## 初始化

yarn init
npm init

## 安装

npm i webpack webpack-cli -D // 非全局安装

版本查看

npx webpack -v

注意

- npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装
- 直接执行 webpack 会报错，因为 webpack 是非全局安装，可执行 npx webpack，或者在 package.json 中配置 scripts:{ 'dev' :'webpack'}，执行 webpack 会默认以 src/index.js 为入口，以 dist/main.js 为出口

## 配置文件

webpack.config.js

这是 webpack 定义的一个默认的配置文件名，webpack 运行时会检查是否有这个配置文件，有这个配置文件时，会使用其中的配置来覆盖默认配置

### entry & output

入口和输出文件目录是可以自己设定的

### loader

loader 是一个声明式函数。
当 webpack 中有不是 JS 的模块时，需要配置对应的 loader，监测对应的模块格式，使用对应的 loader 处理。loader 的配置主要在 module.rules 中进行，这是一个数组，里面是各种 loader 的规则

#### babel-loader

以下是基础配置，需要更复杂的配置还需要深入

- 安装

babel-loader @babel/core @babel/preset-env

- 配置，也可以添加.babelrc 文件将 options 的属性单独提出来

```js
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    browsers: ["> 1%", "last 2 versions"]
                  }
                }
              ]
            ]
          }
        },
        exclude: "/node_modules/"
      }
    ]
  }
};
```

### plugins

#### 自动生成 html

HtmlWebpackPlugin 是在打包后的时刻，自动帮你生成一个引入了打包后的 JS 的 html，并放到输出目录下的一个插件

- 安装

npm i html-webpack-plugin -D

- 配置

```js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  title: "webpack学习",
  filename: "index.html",
  template: "./public/index.html",
  inject: "body",
  minify: false,
  hash: true
});
module.exports = {
  plugins: [htmlWebpackPlugin]
};
```

#### 自动删除 dist 文件

- 安装

npm i clean-webpack-plugin -D

- 配置

```js
// 注意引入时的方式，不是 const CleanWebpackPlugin = require('')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const cleanWebpackPlugin = new CleanWebpackPlugin();
module.exports = {
  plugins: [cleanWebpackPlugin, htmlWebpackPlugin]
};
```

#### 自动添加 css

- 安装

npm i mini-css-extract-plugin -D

- 配置

```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const cssLoader = {
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: "../"
      }
    },
    "css-loader" //打包合并css
  ]
};
const miniCssExtractPlugin = new MiniCssExtractPlugin({
  filename: "[name].css",
  chunkFilename: "[id].css"
});

module.exports = {
  module: {
    rules: [babelLoader, cssLoader]
  },
  plugins: [cleanWebpackPlugin, htmlWebpackPlugin, miniCssExtractPlugin]
};
```