# webpack

**Repository Path**: eriksyuan/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: webapack 4.0 study
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack 4.0

## webpack安装
- 安装本地的webpack
- webpack webpack-cli -D
注意：如果安装的是开发环境的依赖包 安装时加上 -D
- 执行命令  `npx webpack` 打包
- 也可以在package.json中配置`script`脚本执行相应的代码打包
 ```javascript
  "scripts": {
    "build": "webpack"
  }
```
执行 `npm run dev` 也可打包


## webpack的配置
- 默认的配置文件的名称 webpack.config.js

```javascript
module.exports = {
  mode:'development',//production,development
  entry: './src/index.js', //入口
  output: {
    filename: 'bundle.js', //打包后的文件名
    path: path.resolve(__dirname,'dist')  //打包后文件存放路径
  }，
  plugins:[//插件
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'index.html',
      minify:{
        removeAttributeQuotes:true,
        collapseWhitespace:true
      },
      hash:true
    })
  ]，
   module:{
    rules:[   //匹配规则
      //css-loader 解析import语法
      //style-loader 把css插入到header标签
      //scss-loader 把scss解析成css
      //安装scss-loader以外还需要安装node-sass
      //loader执行顺序是从右向左
      // 可以为css-loader设置参数
      {test:/\.css$/,use:[{loader:'style-loader'},'css-loader']},
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
  }
}
```

- mode 设置模式，开发模式：development 打包不会压缩代码  production:生产模式 打包压缩js代码
- entry 指定入口js文件
- output 指定出口  filename:指定打包后的文件名  path:指定打包后文件存放路径
- plugins 配置插件  所有插件都已对象的方式创建
- module 配置模块  rules 配置loader(文件加载规则)
-optimization 优化项

## plugin 插件相关

### HtmlWebpackPlugin

- template 指定模板html文件
- filename 指定输出的html文件名
- minify  配置相关的压缩配置
- hash  配置是否添加hash值

指定打包规则后 会将新打包的html文件输出到output配置的打包文件路径

### MiniCssExtractPlugin

可以将所有css代码打包成一个css文件
配合MiniCssExtractPlugin-loader使用即将css文件引入link标签

-filename 指定打包的css文件名称

如果需要压缩css文件需要配合 `optimize-css-assets-webpack-plugin`

配置优化项压缩css文件 ，但是压缩了css后js压缩不再工作

需要再配合`uglifyjs-webpack-plugin`压缩js代码

相关的优化项配置:
```javascript
optimization:{//优化项
    minimizer:[
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCss({}) //压缩抽离的css代码
    ]
```

## loader

- rules 表示匹配规则
  
  `css-loader`解析`import`语法
  `style-loader` 把css插入到`header`标签(可用`MiniCssExtractPlugin-loader`替换
  `scss-loader` 把scss解析成css
  安装`scss-loader`以外还需要安装`node-sass`
  可以为`css-loader`设置参数

  loader执行顺序是从右向左
  所以处理样式文件的loader设置方式如下
  ```javascript
  {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader']}
  ```
  先执行`sass-loader` 将scss代码解析成css代码 通过`postcss-loader`为特殊标签加上浏览器前缀 `css-loader` 解析css中的import语法，最后调用`MiniCssExtractPlugin.loader` 将css文件插入link标签中


  `postcss-loader`  

  css文件处理插件
  配合autoprefixer可以为css属性名称添加浏览器前缀

  安装 `postcss-loader` 和 `autoprefixer`

  在项目根目录下创建postcss.config.js 文件

  文件内配置相应的规则

```javascript
  module.exports = {
  plugins:[require('autoprefixer')]
}

```