学习笔记 JavaScript ES6 Webpack核心概念

学习内容：

• 入口（entry）
• 出口（output）
• Loader
• 插件（plugin）
• 模式（mode）

ES6+新特性的语法是无法被浏览器所识别的，浏览器只能识别ES5的语法。所以ES6+需要使用一个工具，把语法转化为ES5的语法，这个工具就是Babel。Babel是基于Webpack构建工具进行配置的。

Webpack的官方概念是模块打包机。可以把浏览器识别不了的文件，如.less、.vue等转换为浏览器能识别的文件，除此还可以对文件进行合并、压缩、混淆、缓存等。还有，把开发环境的程序打包，用于生产环境。

Webpack核心概念

入口entry：

入口起点（entry point）：指示webpack应用使用哪个模块来作为构建其内部依赖的开始。

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

出口output：

        output属性告诉webpack在哪里输出它所创建的bundle（包），就是输出的文件要输出到什么地方去，以及如何命名这些文件。

const path = require("path"); // 从node引入一个叫'path'的模块

module.exports = {
  entry: "./path/file.js",
  output: {
    path: path.resolve(__dirname, "dist"), // .resolve是node的语法，取得路径，输入到这个路径的dist文件夹里，还会生成一个默认的main.js的文件
    filename: "webpack.bundle.js"
  }
}

Loader：

        Loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块。

webpack只认识.js或.json的文件，而loader能让webpack处理更多类型的文件。比如配置babel的babel-loader等等吧。

module.exports = {
  entry: "./path/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "webpack.bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: "raw-loader" // 使用row-loader去处理.txt的文件
      }
    ]
  }
}

插件（plugin）：

        loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。比如打包的优化、资源的管理、注入环境变量。

const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过npm安装
const webpack = require('webpack') // 通过require加载进来

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: "raw-loader",
      }
    ]
  },
  plugins: [
    // 为html文件引入一些外部资源，可以把用到的大量的有相互依赖的js文件自动引入进来
    new HtmlWebpackPlugin({ 
      template: "./src/index.html"
    })
  ]
}

模式（mode）：

        通过选择development（开发环境），production（生产环境）或none之中的一个，来设置mode参数。

module.exports = {
    mode : 'production' // 设置生产环境，可以让代码合并、压缩、Hash缓存等。
}