webpack学习笔记(1)--webpack.config.js

主要的信息都是来自于下方所示的网站

https://webpack.docschina.org/configuration

从 webpack 4.0.0 版本开始，可以不用通过引入一个配置文件打包项目。然而，webpack 仍然还是高度可配置的 ，并且能够很好的满足需求。

首先总结下个人理解的,webpack 是一个js的应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。有以下几个优点

• 1.能将多个资源打包成一个或者较少的文件,后续的HTTP交互时,请求数量可能会减少,增加响应速度
• 2.能将资源转化为最适合浏览器的格式,提升应用的性能,只去引用被应用使用的资源,如懒加载资源 (只在需要的时候才加载相应的资源)
• 3.提供了很重要的实时加载和热加载的功能,节省了开发时间

1 entry 入口

entry point 用来指示使用哪个模块来作为构建其内部依赖图的开始, 默认是./src/index.js,可以配置一个或多个入口

例如多个入口:

'''
  entry: {
    app: './src/index.js',
    showlog: './src/showlog.js'
  },
'''

单个文件可以写成:

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

简写:

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

2 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'
  }
};

上面的示例,通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。output只可以指定一个输出的配置

output.filename 输出文件名

output.path 输出文件所在目录