前端基础—Webpack

webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目

入口起点(entry point)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

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

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./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)到哪里。

loader

loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用。

loader 有两个属性：

	test 属性，识别出哪些文件会被转换。
	use 属性，定义出在进行转换时，应该使用哪个 loader。

const path = require('path');
module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};