模式 Mode

  • development 开发环境
  • production 生成环境
  • 可以在命令行中配置 —mode=development 来设置模式，如果配置文件中和命令行中都设置了，采用命令行中的
  • —mode和配置文件中的mode配置 只会在模块中的能获取到，在Node环境中是undefined
  • —env 可以通过配置文件的参数中获取，node环境和模块内拿不到
  • cross-env NODE_ENV=development webpack， cross-env抹平不同系统的设置环境变量的差异 ```javascript mode = development

./src/index.js => 模块 console.log(process.env.NODE_ENV) // development

webpack.config.js => node环境脚本 console.log(process.env.NODE_ENV) // undefined

  2. <a name="B8la2"></a>
  3. ## 入口 Entry
  5. - 配置打包的入口文件
  7. <a name="jmEe2"></a>
  8. ## 出口 Output
  10. - 配置打包的文件路径和文件名
  12. <a name="tJGxB"></a>
  13. ## Loader
  15. - 用来转换某些类型的模块，就是将webpack不认识的模板转成认识的内容
  16. - 单一原则，每个loader只做某一件事
  17. - loader是从右向左执行，最右侧的loader接收源文件，最左侧的loader返回一个JS文件
  18. <a name="brvrN"></a>
  19. ### postcss-loader
  21. - 用来处理css兼容性，给css样式加一些不同浏览器的前缀
  22. <a name="ZAEZx"></a>
  23. ### babel-loader
  25. - 用来转换JS新的语法代码，使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
  26. - @babel/core Babel编译的核心包
  27. - @babel/preset-env Babel编译的预设，可以理解为 Babel 插件的超集
  28. <a name="qDVG7"></a>
  29. ### catch-loader
  31. - 用来缓存开销较大的loader的处理结果，缓存位置node_modules/.cache/cache-loader
  33. <a name="ByII1"></a>
  34. ## Plugin
  36. - 插件可以执行范围更广的任务
  37. - 贯穿整个webpack打包的生命周期，执行不同的任务
  38. <a name="H43Cy"></a>
  39. ### mini-css-extract-plugin
  41. - 用来分离CSS文件，开发环境是用过style-loader来动态插入到html中，开发环境则打包生成出对应的CSS文件
  43. <a name="MiBxU"></a>
  44. ## Resolve
  46. - extensions: 指定要加载的模块的扩展名，尽可能把常用的往前放置，会优先查找
  47. - alias: 配置别名
  48. - modules: 指定去哪个目录中查找对应的模块，告诉webpack优先查找指定文件
  49. - mainFields: package.json中的main字段
  50.    - 如果target是web或者是webworker的话，默认值是'browser', 'module', 'main'
  51.    - 如果target是其他值的时候，默认是是'module', 'main' 
  52.    - target在output中配置
  54. <a name="Igco3"></a>
  55. ## webpack.config.js
  56. ```javascript
  58. const path = require('path');
  59. const HtmlWebpackPlugin = require('html-webpack-plugin')
  61. module.exports = {
  62.   // 模块
  63.   mode: 'development',
  65.   // 入口文件
  66.   entry: './src/index.js',
  68.   // 出口文件
  69.   output: {
  70.     path: path.resolve(__dirname, 'dist'),
  71.     filename: 'main.js'
  72.   },
  74.   // 本地服务
  75.   devServer: {
  76.     compress: true, // 是否开启压缩
  77.     port: 9000,
  78.     open: true,
  79.   },
  81.   // 模块，配置loader
  82.   module: {
  83.     rules: [
  84.       {
  85.         test: /\.css$/,
  86.         use: ['style-loader', 'css-loader']
  87.       }，
  88.       {
  89.           test: /\.js$/,
  90.           use: [
  91.               {
  92.                   loader: 'babel-loader',
  93.                   options: [
  94.                         presets: ['@babel/preset-env'],
  95.                         cacheDirectory: true
  96.                     ]
  97.               }
  98.             ]
  99.       }
  100.     ]
  101.   },
  103.   // 插件
  104.   plugins: [
  105.     new HtmlWebpackPlugin({
  106.       template: './src/index.html'
  107.     })
  108.   ]
  109. }