webpack概念

概念

• 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'
};