入口
指从那个文件开始打包(根据这个文件开始生成依赖图),默认值是 ./src/index.js,可以通过在配置文件(webpack.config.js)中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:
module.exports = { entry: './src/index.js', };
输出
告诉 webpack 它所打包后的文件放在哪里,以及如何命名这些文件
必须是绝对路径,所以这里引入了 path 包
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'output'), filename: 'index.bundle.js', }, };
loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件
loader 有两个属性:
●test 属性,识别出哪些文件会被转换
●use 属性,定义出在进行转换时,应该使用哪个 loader
例子:
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'output'), filename: 'index.bundle.js', }, module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, };
插件
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量
想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过传参(option)自定义。
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], };
在上面的示例中,html-webpack-plugin 为应用程序生成一个 HTML 文件,并自动将生成的所有 打包后的文件 注入到此文件中。参数template 为默认模板
模式
通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production
module.exports = { mode: 'production', };
浏览器兼容性
Webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器,在使用这些表达式之前,还需要 提前加载 polyfill。
环境(environment)
Webpack 5 运行于 Node.js v10.13.0+ 的版本