webpack的基本配置

webpack的基本配置

概念：webpack是现代JavaScript程序的静态模块打包器。

主要包括：入口，输出，loader，插件

1.入口------entry

默认是 “./src/index.js”,可以通过entry去配置

module.exports={
    entry:{
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
}

2.输出------output

告诉webpack在哪里输出打包后的bundles，虽然配置可以有多个起点，但是只能指定一个输出。配置 output 属性的最低要求是设置为一个对象，包括以下两点：

1. filename 用于输出文件的文件名
2. 目标输出目录 path 的绝对路径

module.exports={
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack_bundle.js'
  }
}

3. loader

能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效 模块，然后添加到依赖图中

在 webpack 的配置中 loader 有两个特征：

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪个 loader。
  ####tips：

1. 在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules

2. 允许指定多个loader，应该按照使用loader的顺序（从小到大）倒序编写（从大到小）

4. 插件------plugins

插件的范围包括：打包优化、资源管理和注入环境变量等。

插件的使用：

1. require()，然后把它添加到 plugins 数组中
2. 多数插件可以通过选项(option)自定义
3. 也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

5. 模式------mode

通过将 mode 参数设置为 development, production 或 none，可以启用对应环境下 webpack 内置的优化。默认值为 production。

module.exports = {
  mode: 'production'
};

6.构建本地服务器————devserver

有些配置可以单独出来放发到 .babelrc文件中

webpack官方文档请点 webpack文档

webpack配置详解：webpack配置分步骤解答

配置api文档（方法的集合：axios获取后台数据）：axios使用方法