前端工程化之3分钟讲清楚最经典的前端打包工具webpack基础

概念

Webpack 是一种前端资源构建工具，一个静态模块打包器。一个前端项目中包含了很多资源，但是浏览器并不一定全部认识，比如sass、less、ts，包括js里的高级语法。这些资源如果想在浏览器中正常工作，必须经过编译处理。而我们的Webpack就是可以集成的处理这些文件，并且汇总到一个文件中。

Webpack核心基础

entry

入口（entry）：代表着 Webpack 以那个文件为入口起点开始打包，分析构建内部依赖图。默认值是 ./src/index.js，但你也可以通过配置 entry 属性，来指定一个（或多个）不同的入口起点。

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

output

输出（output）: 指示 Webpack 打包后到资源 bundles 输出到哪里，以及如何命名。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./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'
  }
};

Loader

Loader：Webpack 自身只能理解 JavaScript 和 json 文件，loader 让 Webpack 能够处理其他文件。

const path =