一、什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，本质上 webpack 是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码进行打包。 webpack 官网的图片：

如上图，webpack 这个模块打包器会分析我们项目中的目录结构，找出我们项目中做使用到的多个代码模块，通过处理把这些模块打包成浏览器可以直接访问的几种静态文件。如今，前端一些主流的框架，例如：Vue、React等都会包含使用 webpack 开发工具的配置。所以 webpack 无疑是当下最火的打包工具。在搭建之前让我们先来看一下 webpack 中的几个基本概念。

entry（入口）

• 入口文件：一切从这个文件开始对我的项目进行打包操作。一开始我们使用 webpack 打包构建时，默认的入口文件就是 ./src/index.js。
• 几种常见的入口文件写法：

// 单文件写法
module.exports = {
  entry: './src/index.js' 
}

module.exports = {
  entry: {
    main: './src/index.js'
  }
}

// 多文件写法（可以配置多个入口）
module.exports = {
  entry: {
    main: './src/index.js',
    secondary: './src/secondary.js', 
    // ...
  }
}


module.exports = {
  entry: {
    main: [
      './src/index.js',
      './src/secondary.js'
    ]
  }
}

output（出口）

• output 属性告诉 webpack 在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。
• 几种常见的出口文件写法：

// 单文件出口
module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

// 多个入口文件生成不同出口文件
module.exports = {
  entry: {
    main: './src/index.js',
    secondary: './src/secondary.js', 
    // ...
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
}

loader（转换器）

还在写还在写...