1. 基本概念
2. webpack 配置框架
3. 解析 css 样式
4. 解析 less / sass 文件
5. webpack 打包图片资源
6. webpack 打包其他资源
7. webpack 配置 devServer
8. webpack 单独打包css文件
9. webpack 压缩 css 文件
10. webpack 检查 eslint
11. 构建基础 webpack 开发配置

1. 基本概念

• entry 入口
• output 出口
  • filname 打包后的 js 路径和文件名
  • path 打包后整体输出的文件夹
• loader 使用 webpack 能处理的非 JS 文件
• plugin 执行 loader 处理不了的功能
• mode
  • process.NODE_ENV === development 开发模式
  • process.MODE_ENV === production 生产模式

---

2. webpack 配置框架

安装依赖

npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

const {resolve} = require("path")
module.exports = {
    entry:"", // 入口文件
    output:{
        filename:"",
        path:resolve(__dirname,"dist")
    },
    module:{
        rules:{}
    },
    plugins:[],
    mode:'development"
    mode:"production"
}

---

3. 解析css样式

安装依赖

yarn add style-loader css-loader -D

webpack.config.js 中添加

module.export = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/index.js',
        path:resolve(__dirname,"dist")
    },
    module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]}
        ]
    }
}

---

4. 解析 less / sass 样式

安装依赖

yarn add style-loader css-loader less less-loader sass sass-loader -D

webpack.config.js

module:{
    rules:[
        {test:/\.less$/,use:["style-loader","css-loader","less-loader"]},
        {test:/\.sass$/,use:["style-loader","css-loader","sass-loader"]}
    ]
}

---

5. 打包图片资源

安装依赖

yarn add url-loader html-withimg-webpack file-loader -D

webpack.config.js

module:{
    rules:[
        {
            test:/\.(png|jpg)$/,
            loader:"url-loader",
            potions:{
                limit:10 * 1024 , // 小于10KB的图片转为base64
                esModule:false
            }
        },
        {
            test:/\/html$/,
            loader:"html-withimg-loader"
        }
    ]
}

---

6. webpack 打包其他资源

安装依赖

yarn add file-loader -D

webpack.config.js

module:{
    rules:[
        {
            exculde:/\.(png|jpg|html|js|css|less|scss)$/,
            loader:"file-loader"
        }
    ]
}

---

7.webpack 配置 devServer

安装依赖

yarn  add webpack-dev-server -D

webpack.config.js 配置

module.exports={
    entry:"",
    output:{
        filename:"",
        path:resolve(__dirname,"dist")
    },
    module:{
        rules:[]
    },
    plugins:[],
    mode:"development",
    devServer:{
        staitc:reslove(__dirname,"dist"), // dist 指的是打包的文件夹名称
        open:true, // 打开新窗口
        compress:true, // 开启gzip压缩
        port:3000, // 端口号
    }
}

运行

npx webpack-dev-server

8. webpack 提取 css 为单独文件

安装依赖

yarn add mini-css-extract-plugin -D

webpack.config.js 配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module:{
    rules:[
        {test:/\.css$/,use:[
            MiniCssExtractPlugin.loader,
            "css-loader"
        ]}
    ]
},
plugins:[
    new MiniCssExtractPlugin({
        filename:"css/index.css" // 打包后的 css 路径和文件名
    })
]

---

9. webpack 压缩 css 文件

安装依赖

yarn add optimize-css-assets-webpack-plugin

配置 webpack.config.js

const  OptimizeCssAssetsWebpackPlugin = require(optimize-css-assets-webpack-plugin)
plugins:[
    new OptimizeCssAssetsWebpackPlugin()
]

---

10. webpack 检查 eslint

安装依赖

yarn add eslint eslint-config-airbnb-base eslint-plugin-import eslint-webpack-plugin -D

配置 package.json

{
    "eslintConfig":{
        "extends":"airdnd-base
    }
}

配置 webpack.config.js

const EslintWebpackPlugin = require("eslint-webpack-plugin")
plugin:[
    new EslintWebpackPlugin({
        fix:true, // 自动修复不符合规范的写法
    })
]

---

11. webpack 配置基本的生产环境

安装全部依赖

yarn add webpack webpack-cli webpack-dev-serevr less less-loader sass sass-loader style-loader css-loader url-loader file-loader html-withimg-loader html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin eslint-config-airbnb-base eslint-plugin-import eslint-webpack-plugin -D

配置 webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const {resolve} = require("path");
module.exports = {
  entry:"./src/js/index.js",
  output:{
    filename:"js/dist.js",
    path:resolve(__dirname,"./dist")
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          "style-loader",
          {
            loader:'css-loader',
            options:{
              esModule:false,
            }
          }
        ]
      },
      {
        test:/\.less$/,
        use:[
          'style-loader',
          {
            loader:'css-loader',
            options:{
              esModule:false,
            }
          },
          "less-loader"
        ]
      },
      {
        test:/\.(png|jpg)$/,
        loader:'url-loader',
        options:{
          limit:10*1024,
          esModule:false,
          outputPath:"img"
        }
      },
      {
        test:/\.html$/,
        use:["html-withimg-loader"]
      },
      {
        exclude:/\.(js|html|css|less|html|png|jpg)$/,
        loader:'file-loader',
        options:{
          outputPath:"other"
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    })
  ],
  mode:'development',
  devServer:{
    static:resolve(__dirname,"dist"),
    compress:true,
    port:3000,
    open:true
  }
}