使用 npm 初始化项目，然后安装
webpack
，
webpack-cli
和
lodash
：
npm init -y
npm install --save-dev webpack webpack-cli
src/index.js
export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'myMath.js',
在上面的例子中，我们将通知 webpack 将 src/index.js 打包到 dist/myMath.js 中。
到目前为止，一切都应该与打包应用程序一样，这里是不同的部分 - 我们需要通过 output.library 配置项暴露从入口导出的内容。
webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'myMath.js',
+ library: "myMath",
我们导出了 myMath以便用户可以通过脚本标签使用它：
test/index.html
<script src="../dist/myMath.js"></script>
<script>
myMath.add(1, 2);
</script>
然而它只能通过被脚本标签引用而发挥作用，它不能运行在 CommonJS、AMD、Node.js、 ES module 等环境中。
该特性仍然是实验性的，并且没有完全支持，所以请确保事先启用 experiments.outputModule。除此之外，你可以在 这里 追踪开发进度。
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
experiments: {
outputModule: true,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'myMath.js',
library: {
type: 'module',
执行 npx webpack
test/index.html
<script type="module">
import { add } from '../dist/myMath.js'
console.log(add(1, 2));
</script>
可以看到能正常输出
一个库作者，我们希望它能够以不同的环境，方式，用户应该能够通过以下使用打包后的库：
-
CommonJS module require:
const myMath = require('myMath');
myMath.add(1, 2);
-
AMD module require:
require(['myMath'], function (myMath) {
myMath.add(1, 2);
});
-
script tag:
<!DOCTYPE html>
<script src="https://example.org/myMath.js"></script>
<script>
myMath.add(1, 2);
window.myMath.subtract(2, 2);
</script>
</html>
我们更新 output.library 配置项，将其 type 设置为 'umd'：
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'myMath.js',
library: {
name: 'myMath',
type: 'umd',
globalObject: 'this',
string = 'window'
当输出为 library 时，尤其是当 libraryTarget 为 'umd'时，此选项将决定使用哪个全局对象来挂载 library。为了使 UMD 构建在浏览器和 Node.js 上均可用，应将 output.globalObject 选项设置为 'this'。对于类似 web 的目标，默认为 self。
现在 webpack 将打包一个库，其可以与 CommonJS、AMD 以及 script 标签使用。
当我们在创建 library 的时候可能会用到一些第三方 library，比如 loadsh
npm i loadsh -S
src/index.js
import _ from 'lodash';
export const add = (x, y) => _.add(x, y);
export const subtract = (x, y) => x - y;
执行 npx webpack ，你会发现创建了一个体积相当大的文件。如果你查看这个文件，会看到 lodash 也被打包到代码中。在这种场景中，我们更倾向于把 lodash 当作 peerDependency。也就是说，consumer(使用者) 应该已经安装过 lodash 。因此，你就可以放弃控制此外部 library ，而是将控制权让给使用 library 的 consumer。
这可以使用 externals 配置来完成：
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'myMath.js',
library: {
name: "myMath",
type: "umd"
globalObject: 'this',
+ externals: {
+ lodash: {
+ commonjs: 'lodash',
+ commonjs2: 'lodash',
+ amd: 'lodash',
+ root: '_',
+ },
+ },
这意味着你的 library 需要一个名为 lodash 的依赖，这个依赖在 宿主环境 中必须存在且可用。
package.json
"main": "dist/myMath.js",
发布 npm publish
npm（三）：npm包发布、更新、废弃
为了暴露和 library 关联着的样式表，你应该使用 MiniCssExtractPlugin。然后，用户可以像使用其他样式表一样使用和加载这些样式表。
待续：【webpack 创建 library】实战篇
这是的插件。
主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。
节点> = 10.5.0
npm i -D webpack-upload-plugin
该插件不提供上传至CDN的服务。 实际上，它实际上取决于这种服务。
此插件适用于Webpack> = 3。
对于webpack @ 4，将optimization.minimize设置为false ！
该插件不能与UglifyJs插件配合使用！ 如果仍要压缩，请使用beforeUpload 。
要格外注意你publicPath领域webpack.config.js ， ''可能是最好的选择。
对于webpack @ 2，请使用webpack-upl
webpack-SPA-样板
我创建的一个演示，用于为单页应用程序配置Webpack。
配置包括npm集成，webpack-dev-server的安装以及一些常用的加载程序和插件。
完整功能清单
npm集成（在package.json中）
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.prod.js --progress"
注意： npm start将运行web-dev-server进行本地开发。 npm run build将在生产环境中构建项目。
前段时间，老大让我重构下公司图表组件库2.0，组件库使用webpack打包的。于是，研究了一番，研究的过程中，我发现webpack的某些选项配置，还是有不少地方需要注意的，涉及到output，externals等。功能上涉及到，打包的格式，包体发布后的运行环境等等。因此，有了这篇博客。话不多说，我们开始~~
2.output
用webpack打包时长会随着代码增加而变长,代码量可能比较大的可以参考我的另一篇使用vite打包sdk文章.如何使用webpack打包一个库library,使用webpack打包sdk.
当你的库导出的内容需要在另外的地方（通常是另一个项目）访问，那么你应该给 webpack 配置 library 字段，library 究竟要配置成什么值，这取决于你希望你的库怎么被引入。
有些时候，我们可能需要制作自己的一个 JS 库。webpack 有提供相应的功能。
创建一个 library
首先准备要被打包成“库”的文件。将某个 id 为 app 的元素的内容变成 MyLibaray ，并打印出 lodash 是什么。
基本的目录结构如下：
index.css
.lib-box {
color: red;
text-align: center;
background-color:green;
index.html
<div class="lib-b
webpack 4.0.0-beta.0 新特性介绍 2018-02-17 阅读 1478 收藏 1 原链：jdc.jd.com ...
CSS抽离与压缩
将Css文件单独提取一个文件中，推荐当css文件大于150kb时在考虑使用该插件，否则会多一次css的请求；开发环境中使用压缩性价比不高，所以一般在生产环境中使用；
生产环境下，在loader中配置MiniCssExtractPlugin.loader代替style-loader，在插件中配置MiniCssExtractPlugin的输出路径用于抽离CSS ，配置CssMinimizerPlugin插件来压缩CSS代码
**注意：**使用了插件以后，在css的loader配置中就不需要
