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'//指定输出文件名 } };

path.resolve()用法

var path = require("path") //引入node的path模块 path.resolve('/foo/bar', './baz') // returns '/foo/bar/baz' path.resolve('/foo/bar', 'baz') // returns '/foo/bar/baz' path.resolve('/foo/bar', '/baz') // returns '/baz' path.resolve('/foo/bar', '../baz') // returns '/foo/baz' path.resolve('home','/foo/bar', '../baz') // returns '/foo/baz' path.resolve('home','./foo/bar', '../baz') // returns '/home/foo/baz' path.resolve('home','foo/bar', '../baz') // returns '/home/foo/baz'

从后向前，若字符以 / 开头，不会拼接到前面的路径(因为拼接到此已经是一个绝对路径)；若以 ../ 开头，拼接前面的路径，且不含最后一节路径；若以 ./ 开头 或者没有符号 则拼接前面路径；

loader 

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 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 转换一下。”

注：上面这段解释很形象，哈哈哈😄

 

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

module.exports = { module: { rules: [ { test: /\.css$/, use: [ // style-loader { loader: 'style-loader' }, // css-loader { loader: 'css-loader', options: { modules: true } }, // sass-loader { loader: 'sass-loader' } ] } ] } };

内联方式 

插件(plugin) 

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

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

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };

html-webpack-plugin的作用

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口 const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin({ // 打包输出HTML title: 'Hello World app', minify: { // 压缩HTML文件 removeComments: true, // 移除HTML中的注释 collapseWhitespace: true, // 删除空白符与换行符 minifyCSS: true// 压缩内联css }, filename: 'index.html', template: 'index.html' }), ]

更详细用法见 html-webpack-plugin

splitChunksPlugin的作用

起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依赖重复。而在webpack4中CommonsChunkPlugin被移除，取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk 配置项

以下是SplitChunksPlugin的默认配置：

splitChunks: { chunks: "async", minSize: 30000, // 模块的最小体积 minChunks: 1, // 模块的最小被引用次数 maxAsyncRequests: 5, // 按需加载的最大并行请求数 maxInitialRequests: 3, // 一个入口最大并行请求数 automaticNameDelimiter: '~', // 文件名的连接符 name: true, cacheGroups: { // 缓存组 vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }

 

缓存组：

缓存组因该是SplitChunksPlugin中最有趣的功能了。在默认设置中，会将 node_mudules 文件夹中的模块打包进一个叫 vendors的bundle中，所有引用超过两次的模块分配到 default bundle 中。更可以通过 priority 来设置优先级。

chunks：

chunks属性用来选择分割哪些代码块，可选值有：'all'（所有代码块），'async'（按需加载的代码块），'initial'（初始化代码块）。

使用SplitChunksPlugin不需要安装任何依赖，只需在 webpack.config.js 中的 config对象添加 optimization 属性：

 

optimization: { splitChunks: { chunks: 'initial', automaticNameDelimiter: '.', cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: 1 } } }, }

更多用法需要查看官网。

模式(mode) 

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

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

入口起点(entry points)

webpack.config.js

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

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

“webpack 配置的可扩展”是指，这些配置可以重复使用，并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并起来。

当你通过插件生成入口时，你可以传递空对象 {} 给 entry。

webpack.config.js

module.exports = { entry: { main: './src/app.js', vendor: './src/vendor.js' } };

webpack.prod.js

module.exports = { output: { filename: '[name].[contentHash].bundle.js' } };

webpack.dev.js

module.exports = { output: { filename: '[name].bundle.js' } };

输出(output)

webpack.config.js

module.exports = { output: { filename: 'bundle.js', } };

此配置将一个单独的 bundle.js 文件输出到 dist 目录中。

多个入口起点 

如果配置中创建出多于一个 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用 占位符(substitutions) 来确保每个文件具有唯一的名称。

module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } }; // 写入到硬盘：./dist/app.js, ./dist/search.js