Webpack 核心概念

介绍

Webpack 是现代 JavaScript 应用的静态模块打包工具。在处理应用时，通过构建依赖图来生成一个或多个代码包。

区别

前端代码中，引用库的方式通常是以<script>标签的形式引入全局变量，再在代码中使用该变量。库文件和代码文件是需要分开导入的。

Webpack 支持import和export等模块化语法，通过依赖关系对所有文件进行打包等处理后生成代码包。从而实现更好的模块化开发方式，并能在这基础上做各种优化。

核心概念

Entry
Output
Loaders
Plugins
Mode
Browser Compatibility

默认配置文件：webpack.config.js

Entry

entry（入口）说明了从哪个文件开始分析依赖图，推断出其它有依赖关系的模块或库。默认为./src/index.js。

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

Output

output说明了生成包的位置和命名方式。

const path = require('path');

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

Loaders

Webpack 默认支持 JavaScript 文件。其它文件（css，less等）需要Loaders来处理和转换成可用的模块组合到依赖关系和包里面。

该配置有两个主要属性：

test指定了要处理的文件（一般为正则表达式）
`use``指定了要使用的 loader

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.txt$/, 
        use: 'raw-loader' 
      }
    ]
  }
};

当 require() / import语句遇到.txt文件时，使用raw-loader转换后再加入包。

Plugins

Loaders用来处理特定类型文件、模块，plugins则可以用来处理更大范围内的任务，如包优化、静态资源管理、环境变量导入等。

使用 plugin，需要通过require导入，new之后加入到plugins数组中。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

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

html-webpack-plugin按模板生成一个自动加入生成包的 HTML 文件。

Mode

Mode选项可以开启对应环境的内置优化方案。

module.exports = {
  mode: 'production'    
}

CL's Blogs