webpack 非入口文件名
webpack non-entry filenames
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const fs = require('fs');
module.exports = {
mode: 'production',
context: path.resolve(__dirname, 'app'),
devServer: {
host: "www.mydomain.local",
compress: true,
https: {
key: fs.readFileSync('https.key'),
cert: fs.readFileSync('https.crt')
}
},
optimization: {
minimizer: [new UglifyJsPlugin({})],
},
entry: {
blog: path.resolve(__dirname, 'src', 'blog.js')
},
output: {
path: path.resolve(__dirname, 'web', '_assets'),
publicPath: path.resolve(__dirname, 'web', '_assets'),
filename: "js/[name].[hash].bundle.js"
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].[hash].bundle.css",
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
}
};
如您所见,我在 webpack 配置中只有一个条目 "blog" 解析为 ./src/blog.js
,其中包含以下内容:
import('./css/blog.scss')
console.log(1)
当我 运行 webpack --config webpack.config.js
它按预期构建 ./web/_assets/js/blog.21342i1j4h1kj.bundle.js
其中包含 console.log(1)
。
然而奇怪的是它还构建了 ./web/_assets/js/1.21342i1j4h1kj.bundle.js
和 ./web/_assets/css/1.21342i1j4h1kj.bundle.js
额外的 JS 文件包含
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,function(n,w,o){}]]);
和 1.css 文件包含 sass 到 css 编译的 css。
我的问题是:
- 为什么会有多余的JS文件?
- 为什么 css 文件没有被调用
blog.21342i1j4h1kj.bundle.css
?
- 如何更改配置来解决此问题?
原来 1.js 是一个 webpack 动态导入功能,因为 css 是在 blog.js
文件中导入的。我最终只是对 webpack.config.js
条目部分进行了此更改
blog: [
path.resolve(__dirname, 'src_new', 'blog.js'),
path.resolve(__dirname, 'src_new', 'blog.scss')
],
剩下的由插件配置处理:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash].bundle.css",
})
],
这导致 blog.5903ffe3afb455f5e5d0.bundle.css
和 blog.5903ffe3afb455f5e5d0.bundle.js
在 output.path
中定义
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const fs = require('fs');
module.exports = {
mode: 'production',
context: path.resolve(__dirname, 'app'),
devServer: {
host: "www.mydomain.local",
compress: true,
https: {
key: fs.readFileSync('https.key'),
cert: fs.readFileSync('https.crt')
}
},
optimization: {
minimizer: [new UglifyJsPlugin({})],
},
entry: {
blog: path.resolve(__dirname, 'src', 'blog.js')
},
output: {
path: path.resolve(__dirname, 'web', '_assets'),
publicPath: path.resolve(__dirname, 'web', '_assets'),
filename: "js/[name].[hash].bundle.js"
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].[hash].bundle.css",
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
}
};
如您所见,我在 webpack 配置中只有一个条目 "blog" 解析为 ./src/blog.js
,其中包含以下内容:
import('./css/blog.scss')
console.log(1)
当我 运行 webpack --config webpack.config.js
它按预期构建 ./web/_assets/js/blog.21342i1j4h1kj.bundle.js
其中包含 console.log(1)
。
然而奇怪的是它还构建了 ./web/_assets/js/1.21342i1j4h1kj.bundle.js
和 ./web/_assets/css/1.21342i1j4h1kj.bundle.js
额外的 JS 文件包含
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,function(n,w,o){}]]);
和 1.css 文件包含 sass 到 css 编译的 css。
我的问题是:
- 为什么会有多余的JS文件?
- 为什么 css 文件没有被调用
blog.21342i1j4h1kj.bundle.css
? - 如何更改配置来解决此问题?
原来 1.js 是一个 webpack 动态导入功能,因为 css 是在 blog.js
文件中导入的。我最终只是对 webpack.config.js
条目部分进行了此更改
blog: [
path.resolve(__dirname, 'src_new', 'blog.js'),
path.resolve(__dirname, 'src_new', 'blog.scss')
],
剩下的由插件配置处理:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash].bundle.css",
})
],
这导致 blog.5903ffe3afb455f5e5d0.bundle.css
和 blog.5903ffe3afb455f5e5d0.bundle.js
在 output.path