webpack概念1

Posted 2020-11-18 ningzy

概念

• webpack是一个现代javascript应用程序的静态模块打包器，
• webpack处理应用程序时他会递归的构建一个依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个build文件

重要的四个概念

1. 入口（entry）
2. 输出（output）
3. loader(处理非js文件)
4. 插件（plugins）

入口（enter）

告诉webpack 使用那个模块 来作为构建内部依赖图的开始！进图入口文件后，webpack会找到那些模块和库是入口起点（直接或者间接）的依赖！

例子：

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘    // 我们的入口文件
};

出口（output）

output告诉webpack从哪里产出builds 以及如何命名这些文件 默认值是 ./dist。这样整个应用程序结构都会编译到你指定的文件夹中。

例子

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‘        // 打包后的js名称
  }
};

loader

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

本质上 webpack loader 是将 所有类型的文件 转化为 应用程序依赖图（最终的bundle） 可以直接进行引用。

webpack loader 俩个参数

1. test 用于标识出应该被对应的 loader 进行转换的 某个 或者某个文件
2. use 标识转换时应该使用那个loader

例子:

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‘        // 打包后的js名称
  },
  module: {
    rules: [
      { test: /.txt$/, use: ‘raw-loader‘ }
    ]
  }
};

解释：
raw-loader webpack 的原始模块 将文件加载为字符串
module 这块的配置告诉 webpack 在打包过程中 遇到【require 或者 import】语句被解析为 ·.txt·的时候 请用·raw-loader· 转换一下

插件（plugins）

loader 可以用来转换某些类型的模块，而插件则可以执行范围更广的任务.
插件的范围包括：

1. 打包优化
2. 压缩
3. 重新定义环境中的变量

使用一个插件 只需要 require 它。 然后给它添加到 plugins 数组中。 多数插件可以通过 options 来定义。
注意：如果你在一个配置文件中多次的使用同一个插件时，这时候需要通过new 操作符来重建一个新的实例。

例子：

const webpack = require(‘webpack‘);
const htmlWebpackPlugin = require(‘html-webpack-plugin‘); // html 需要npm 安装一下
const config = {
  module: {
    rules: [
      { test: /.txt$/, use: ‘raw-loader‘ }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),                // 压缩js
    new HtmlWebpackPlugin({template: ‘./src/index.html‘}) // 指定模板
  ]
};

模式

通过 development 或 ·production· 之中的一个 来设置 mode 参数， 来启动 webpack 内置的优化

module.exports = {
  mode: ‘production‘
};