# webpack-style

**Repository Path**: DoraZC/webpack-style

## Basic Information

- **Project Name**: webpack-style
- **Description**: webpack practice demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-01
- **Last Updated**: 2022-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 步骤

```
1.npm init -y
```

```
 2.npm i -D webpack webpack-cli
```

```
3.npm i -D html-webpack-plugin webpack
```

> 打包出来的 js 文件需要引入到 html 中 每次都需要手动修改 js 文件名很麻烦 安装这个插件可以帮我们完成这件事 这个插件还可以用来解决多入口文件开发

```
4.npm i -D clean-webpack-plugin
```

### 用于在打包输出前清空文件夹

```
 5.npm i -D style-loader css-loader npm i -D less less-loader
```

### 来解析我们的 css 文件

```
6.npm i -D postcss-loader autoprefixer
```

## 添加浏览器前缀 有两种方式配置

### 1.1 根目录下创建 postcss.config.js 代码详见 js

### 1.2 在 webpack.config.js 里配置

```
  module:{
      rules:[{
          test:/\.less$/,
          use:['style-loader','css-loader',{
              loader:'postcss-loader',
              options:{
                  plugins:[require('autoprefixer')]
              }
          },'less-loader'] // 从右向左解析原则
      }]
  }
```

## 7.npm i -D mini-css-extract-plugin 拆分 css

## 8.npm i -D extract-text-webpack-plugin@next 拆分多个 css 

## 9.file-loader(处理文件名和路径、解析文件url)  url-loader(一般与file-loader搭配使用，功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件移动到输出的目录中)
```
// webpack.config.js
module.exports = {
  // 省略其它配置 ...
  module: {
    rules: [
      // ...
      {
        test: /\.(jpe?g|png|gif)$/i, //图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  }
}
```
## 10.为了使我们的js代码兼容更多的环境我们需要安装依赖
```
npm i -D babel-loader @babel/preset-env @babel/core
// webpack.config.js
module.exports = {
    // 省略其它配置 ...
    module:{
        rules:[
          {
            test:/\.js$/,
            use:{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
            },
            exclude:/node_modules/
          },
       ]
    }
}

```
## 11.上面的babel-loader只会将 ES6/7/8语法转换为ES5语法，但是对新api并不会转换 例如(promise、Generator、Set、Maps、Proxy等) babel-polyfill来帮助我们转换
```
npm i @babel/polyfill
// webpack.config.js
const path = require('path')
module.exports = {
    entry: ["@babel/polyfill",path.resolve(__dirname,'../src/index.js')],    // 入口文件
}


```

> 1."build":"webpack ./src/main.js", 打包出来的和 main.js 中的一模一样

> dist 文件夹中的 main.js 就是我们需要在浏览器中实现运行的文件

> 2."build":"webpack --config build/webpack.config.js", 打包出来 output.js 可配置

> npm i -D 为 npm install --save-dev 的缩写

> npm i -S 为 npm install --save 的缩写