webpack概念

Posted 2022-06-18 qq3279338858

概念

入口

• 默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

module.exports = 
  entry: './path/to/my/entry/file.js'
;

输出

• output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

const path = require('path'); // Node.js 核心模块，用于操作文件路径。

module.exports = 
  entry: './path/to/my/entry/file.js',
  output: 
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  
;

loader

const path = require('path');

module.exports = 
  output: 
    filename: 'my-first-webpack.bundle.js'
  ,
  module: 
    rules: [ // 打包前处理
      
        test: /\.txt$/, // 标识出应该被对应的 loader 进行转换的某个或某些文件 ，正则
        use: 'raw-loader' // 表示进行转换时，应该使用哪个 loader
      
    ]
  
;

插件

• 执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
• html-webpack-plugin 为应用程序生成 HTML 一个文件，并自动注入所有生成的 bundle。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装后，引入
const webpack = require('webpack'); // 用于访问内置插件

module.exports = 
  module: 
    rules: [
       test: /\.txt$/, use: 'raw-loader' 
    ]
  ,
  plugins: [
    new HtmlWebpackPlugin(template: './src/index.html')
  ]
;

模式

• 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = 
  mode: 'production'
;

浏览器兼容性

• webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）
• webpack 的 import() 和 require.ensure() 需要 Promise。