使用 webpack 独立的块文件
Independent chunk files with webpack
我正在构建一个组件库,我正在使用 Webpack 来捆绑它。有些组件仅依赖于我编写的 html 模板、css 和 JavaScript,但有些组件需要外部库。
我想要实现的是 vendor.js
,如果您要使用的组件需要它,可选 包含它。
例如,如果用户只需要一个没有供应商依赖的组件,他们使用 main.bundle.js
就足够了,它只包含我自己的代码。
在我的 index.js
中,我有以下导入:
import { Header } from './components/header/header.component';
import { Logotype } from './components/logotype/logotype.component';
import { Card } from './components/card/card.component';
import { NavigationCard } from './components/navigation-card/navigation-card.component';
import { AbstractComponent } from './components/base/component.abstract';
import { Configuration } from './system.config';
import 'bootstrap-table';
import './scss/base.scss';
所有这些导入都是我自己的,期待 bootstrap-table
。
我是这样配置 Webpack 的:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractScss = new ExtractTextPlugin({
filename: "[name].bundle.css"
});
module.exports = {
entry: {
main: './src/index.ts'
},
output: {
path: path.resolve(__dirname, 'dist/release'),
filename: "[name].bundle.js",
chunkFilename: "[name].bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', // Specify the common bundle's name.
minChunks: function (module) {
// Here I would like to tell Webpack to give
// each bundle the ability to run independently
return module.context && module.context.indexOf('node_modules') >= 0;
}
}),
extractScss
],
devtool: "source-map",
resolve: {
// Add `.ts` as a resolvable extension.
extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
},
module: {
rules: [
// All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
// Allows for templates in separate ejs files
{test: /\.ejs$/, loader: 'ejs-compiled-loader'},
{
test: /\.scss$/,
use: extractScss.extract({
use: [{
loader: 'css-loader', options: {
sourceMap: true
}
}, {
loader: 'sass-loader', options: {
soureMap: true
}
}]
})}
]
}
}
这会产生两个 .js
文件和一个 .css
文件。但是,webpacks 通用模块加载功能位于 vendor.js
中,如果我不首先包含供应商,这会使我的 main 无法使用,而且并不总是需要它。
总结一下,如果用户只需要页脚(没有外部依赖),这就足够了:
<script src="main.bundle.js"></script>
如果用户想要使用具有外部依赖性的 table,他们需要同时包括:
<script src="vendor.js"></script>
<script src="main.bundle.js"></script>
现在,仅包括 main.bundle.js
给我这个错误:
Uncaught ReferenceError: webpackJsonp is not defined
.
我知道在 Webpack 配置中创建我的供应商块后,我可以通过添加它来提取所有常用功能:
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
但是这种方法仍然需要用户包含两个 .js
文件。
我怎样才能实现这个目标?好像我没有像上面那样提取公共模块时只相差2 kb,这对我来说没问题。
事实证明,如果您能忍受一些手动工作并真正了解 Webpack 的功能(我没有),这很容易做到。我是这样解决的:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractScss = new ExtractTextPlugin({
filename: "[name].bundle.css"
});
module.exports = {
entry: {
main: './src/index.ts',
vendor: './src/vendor/vendor.ts'
},
output: {
path: path.resolve(__dirname, 'dist/release'),
filename: "[name].bundle.js",
chunkFilename: "[name].bundle.js"
},
plugins: [
extractScss
],
devtool: "source-map",
resolve: {
// Add `.ts` as a resolvable extension.
extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
},
module: {
rules: [
// All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
// Allows for templates in separate ejs files
{test: /\.ejs$/, loader: 'ejs-compiled-loader'},
{
test: /\.scss$/,
use: extractScss.extract({
use: [{
loader: 'css-loader', options: {
sourceMap: true
}
}, {
loader: 'sass-loader', options: {
soureMap: true
}
}]
})}
]
}
}
在 vendor.ts
中,然后我只需导入我拥有的任何供应商依赖项:
import 'jquery';
import 'bootstrap-table';
这会产生两个不同的文件,它们都有 Webpacks 引导逻辑。
希望这对某人有所帮助。
我正在构建一个组件库,我正在使用 Webpack 来捆绑它。有些组件仅依赖于我编写的 html 模板、css 和 JavaScript,但有些组件需要外部库。
我想要实现的是 vendor.js
,如果您要使用的组件需要它,可选 包含它。
例如,如果用户只需要一个没有供应商依赖的组件,他们使用 main.bundle.js
就足够了,它只包含我自己的代码。
在我的 index.js
中,我有以下导入:
import { Header } from './components/header/header.component';
import { Logotype } from './components/logotype/logotype.component';
import { Card } from './components/card/card.component';
import { NavigationCard } from './components/navigation-card/navigation-card.component';
import { AbstractComponent } from './components/base/component.abstract';
import { Configuration } from './system.config';
import 'bootstrap-table';
import './scss/base.scss';
所有这些导入都是我自己的,期待 bootstrap-table
。
我是这样配置 Webpack 的:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractScss = new ExtractTextPlugin({
filename: "[name].bundle.css"
});
module.exports = {
entry: {
main: './src/index.ts'
},
output: {
path: path.resolve(__dirname, 'dist/release'),
filename: "[name].bundle.js",
chunkFilename: "[name].bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', // Specify the common bundle's name.
minChunks: function (module) {
// Here I would like to tell Webpack to give
// each bundle the ability to run independently
return module.context && module.context.indexOf('node_modules') >= 0;
}
}),
extractScss
],
devtool: "source-map",
resolve: {
// Add `.ts` as a resolvable extension.
extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
},
module: {
rules: [
// All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
// Allows for templates in separate ejs files
{test: /\.ejs$/, loader: 'ejs-compiled-loader'},
{
test: /\.scss$/,
use: extractScss.extract({
use: [{
loader: 'css-loader', options: {
sourceMap: true
}
}, {
loader: 'sass-loader', options: {
soureMap: true
}
}]
})}
]
}
}
这会产生两个 .js
文件和一个 .css
文件。但是,webpacks 通用模块加载功能位于 vendor.js
中,如果我不首先包含供应商,这会使我的 main 无法使用,而且并不总是需要它。
总结一下,如果用户只需要页脚(没有外部依赖),这就足够了:
<script src="main.bundle.js"></script>
如果用户想要使用具有外部依赖性的 table,他们需要同时包括:
<script src="vendor.js"></script>
<script src="main.bundle.js"></script>
现在,仅包括 main.bundle.js
给我这个错误:
Uncaught ReferenceError: webpackJsonp is not defined
.
我知道在 Webpack 配置中创建我的供应商块后,我可以通过添加它来提取所有常用功能:
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
但是这种方法仍然需要用户包含两个 .js
文件。
我怎样才能实现这个目标?好像我没有像上面那样提取公共模块时只相差2 kb,这对我来说没问题。
事实证明,如果您能忍受一些手动工作并真正了解 Webpack 的功能(我没有),这很容易做到。我是这样解决的:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractScss = new ExtractTextPlugin({
filename: "[name].bundle.css"
});
module.exports = {
entry: {
main: './src/index.ts',
vendor: './src/vendor/vendor.ts'
},
output: {
path: path.resolve(__dirname, 'dist/release'),
filename: "[name].bundle.js",
chunkFilename: "[name].bundle.js"
},
plugins: [
extractScss
],
devtool: "source-map",
resolve: {
// Add `.ts` as a resolvable extension.
extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
},
module: {
rules: [
// All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
// Allows for templates in separate ejs files
{test: /\.ejs$/, loader: 'ejs-compiled-loader'},
{
test: /\.scss$/,
use: extractScss.extract({
use: [{
loader: 'css-loader', options: {
sourceMap: true
}
}, {
loader: 'sass-loader', options: {
soureMap: true
}
}]
})}
]
}
}
在 vendor.ts
中,然后我只需导入我拥有的任何供应商依赖项:
import 'jquery';
import 'bootstrap-table';
这会产生两个不同的文件,它们都有 Webpacks 引导逻辑。
希望这对某人有所帮助。