一、核心概念

  1. Entry
  2. |   代码的入口,打包的入口,单个或多个入口
  3. Output
  4. |   打包成的文件(bundle) 一个或多个 自定义规则
  5. Loaders
  6. |   处理文件,转化为模块
  7. Plugins
  8. |   可以参与整个打包的过程
  9. |   打包优化和压缩
  10. |        配置编译时的变量
  11. mode

1-1 Entry,Output

定义多个入口文件,输入多个文件

webpack.config.js

  1. const webpack = require('webpack');
  2. const {
  3.     resolve
  4. } = require('path');
  5. const config = {
  6.     entry:{
  7.         index:resolve(__dirname,'src/index.js'),
  8.         vendor:resolve(__dirname,'src/vendor.js')
  9.     },
  10.     output: {
  11.         path: resolve(__dirname, 'dist'),
  12.         filename: "[hash]-[name]-bundle.js"
  13.     },
  14.     mode: 'development'
  15. }
  16. module.exports = config

package.json

  1. "scripts": {
  2.     "build":"webpack --config webpack.config.js"
  3.  }

1-2 loader,plugins

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

加载css

  1. npm i style-loader css-loader -S
  1. const webpack = require('webpack');
  2. const {resolve} = require('path');
  3. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  4. const config = {
  5.     entry:{
  6.         index:resolve(__dirname,'src/index.js'),
  7.         vendor:resolve(__dirname,'src/vendor.js')
  8.     },
  9.     output: {
  10.         path: resolve(__dirname, 'dist'),
  11.         filename: "[hash]-[name]-bundle.js"
  12.     },
  13.     plugins:[
  14.         new CleanWebpackPlugin()
  15.     ],
  16. + module:{
  17. +     rules:[
  18. +         {
  19. +                test:/\.css$/,
  20. +                use:[
  21. +                    'style-loader',
  22. +                    'css-loader'
  23. +                ]
  24. +            }
  25. +        ]
  26. +   },
  27.     mode: 'development'
  28. }
  29. module.exports = config
//常用的loader
- 编译相关
babel-loader ts-loader
- 样式相关
style-loader css-loader less-loader postcss-loader sass-loader
- 文件相关
file-loader url-loader

1-3 代码压缩

module.exports = {
  //...
  optimization: {
    minimize: true
  }
};