webpack探索和使用（基础环境搭建）

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

1.实现一个最简单的webpack流程

（1）四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

（2）分别代表着：

• 项目打包入口
• 打包产物出口
• 引入模块类型转换（例如：import ES6转ES5，SCSS转CSS等 ）
• 外部插件（例如：HTML页面生成，压缩，source-map管理等）

（3）首先使用前两个配置 实现一次构建：
在项目下新建webpack.config.js(默认文件名)文件，如图：

添加如下配置：

const path = require('path');
module.exports = {
   
    entry: '/index.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'), // 输出位置当前目录
        filename: 'mybundle.js'
    }
}

执行构建指令：

webpack --config webpack.config.js

可以看到已经构建成功：

在项目dist目录下，生成了bundle文件：

2.加入loader（ts为例）

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

将index.js文件改成ts文件后缀，并引入其他ts文件:
在执行webpack构建指令以后，会抛出错误信息，表示无法解析当前引用文件

引入ts-loader,来对项目引入的typescript进行转换：

const path = require('path');