什么事webpack？
- webpack是一个用于现代Javascript应用程序的静态模块打包工具；
- 当webpack处理应用程序时，会在内部从一个或多个入口点构建依赖图；
- 每当一个文件依赖另一个文件时，webpack都会将文件视为直接存在依赖关系；
- 这使得webpack可以获取非代码资源，如images或web字体，并会把他们作为依赖提供给应用程序；
入口
- 入口起点是webpack应该使用那个模块，来作为构建内部以来图的开始；
- 默认值是./src/index.js,也可以在webpack configuration 中配置entry属性，来制定不同的入口起点； webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
};
输出（output）
- output属性告诉webpack在哪里输出他所创建的bundle，以及如何命名这些文件；
- 主要输出文件的默认值是./dist/main.js,其他生成文件默认放在./dist文件夹中 webpack.config.js
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
- webpack只能理解Javascript和JSON文件；
- loader能够去处理其他类型的文件，并转换为有效模块，以供应用程序使用，添加到依赖图中；
- webpack一个强大的特性就是通过import导入任何类型的模块（例如.css）;
- 更高层面，在webpack配置中，loader有两个属性：
- test属性，识别哪些文件会被转换；
- use属性，定义在进行转换时，应该使用哪个loader； webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
};
- 以上配置中，对一个单独的 module 对象定义了
rules属性，里面包含两个必须属性：test和use。这告诉 webpack 编译器(compiler) 如下信息： -
嘿，webpack 编译器，当你碰到「在
require()/import语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 use(使用)raw-loader转换一下。”
插件plugin
- loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
- 想要一个插件，你只需要require（）它，
const HtmlWebpackPlugin = require('html-webpack-plugin');; - 然后把她添加到plugins数组中，
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],； - 在下面示例中，
html-webpack-plugin为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。 webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
