Javascript 为什么webpack4产品包总是包含样式加载器、css加载器和vue加载器内容?
在webpack中使用生产模式构建的my multi-entry point final捆绑包中导出的多条目编译js文件始终包含loaders内容。如何消除它们以及为什么包括它们 复制Javascript 为什么webpack4产品包总是包含样式加载器、css加载器和vue加载器内容?,javascript,vue.js,webpack,webpack-4,webpack-style-loader,Javascript,Vue.js,Webpack,Webpack 4,Webpack Style Loader,在webpack中使用生产模式构建的my multi-entry point final捆绑包中导出的多条目编译js文件始终包含loaders内容。如何消除它们以及为什么包括它们 复制 git clone https://github.com/adamchenwei/boilerplate-webpack-babel-sass-storybook-vuejs.git git checkout step/3-prod-webpack-build-setup-basic npm install np
git clone https://github.com/adamchenwei/boilerplate-webpack-babel-sass-storybook-vuejs.git
git checkout step/3-prod-webpack-build-setup-basic
npm install
npm run build:prod
任何想法都将不胜感激。
也没有帮助。
我读过《夫妻》,所以似乎还没有解决办法
谢谢
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/library.js',
HelloComp: './src/components/HelloComponent/HelloComponent.vue',
Bye: './src/components/ByeComponent/ByeComponent.vue'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
externals: {
'vue': {
root: 'vue',
commonjs2: 'vue',
commonjs: 'vue',
amd: 'vue',
umd: 'vue'
},
'vue-router': {
root: 'vue-router',
commonjs2: 'vue-router',
commonjs: 'vue-router',
amd: 'vue-router',
umd: 'vue-router'
},
'style-loader': {
root: 'style-loader',
commonjs2: 'style-loader',
commonjs: 'style-loader',
amd: 'style-loader',
umd: 'style-loader'
},
'vue-hot-reload-api': {
root: 'vue-hot-reload-api',
commonjs2: 'vue-hot-reload-api',
commonjs: 'vue-hot-reload-api',
amd: 'vue-hot-reload-api',
umd: 'vue-hot-reload-api'
},
'vue-loader': {
root: 'vue-loader',
commonjs2: 'vue-loader',
commonjs: 'vue-loader',
amd: 'vue-loader',
umd: 'vue-loader'
}
}
}
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// const path = require('path')
// function resolve (dir) {
// return path.join(__dirname, '..', dir)
// }
const configedAnalyzer = new BundleAnalyzerPlugin({
// Can be `server`, `static` or `disabled`.
// In `server` mode analyzer will start HTTP server to show bundle report.
// In `static` mode single HTML file with bundle report will be generated.
// In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
analyzerMode: 'static',
// Host that will be used in `server` mode to start HTTP server.
analyzerHost: '127.0.0.1',
// Port that will be used in `server` mode to start HTTP server.
analyzerPort: 8887,
// Path to bundle report file that will be generated in `static` mode.
// Relative to bundles output directory.
reportFilename: './../report/bundle_anlaysis.html',
// Module sizes to show in report by default.
// Should be one of `stat`, `parsed` or `gzip`.
// See "Definitions" section for more information.
defaultSizes: 'gzip',
// Automatically open report in default browser
openAnalyzer: true,
// If `true`, Webpack Stats JSON file will be generated in bundles output directory
generateStatsFile: true,
// Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
// Relative to bundles output directory.
statsFilename: 'stats.json',
// Options for `stats.toJson()` method.
// For example you can exclude sources of your modules
// from stats file with `source: false` option.
// See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
// Log level. Can be 'info', 'warn', 'error' or 'silent'.
logLevel: 'info'
})
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// IMPORTANT: All js load should come AFTER vue-loader!!!
{
test: /\.(js|vue)$/,
use: 'eslint-loader',
enforce: 'pre' // kick in before other loader... Q: also before vue-loader I suppose? maybe better move it to top?
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.js$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new CopyWebpackPlugin([{
// NOTE: it does not really do anything, unless we have a asset folder, that needed no compression
from: './static/',
to: './static/',
toType: 'dir'
}]),
// NOTE: honestly, this did not help reduce prod bundle size... but for wtw:
// https://webpack.js.org/plugins/module-concatenation-plugin/
new webpack.optimize.ModuleConcatenationPlugin(),
// NOTE: disable when needed, its just to analyze code
configedAnalyzer
],
stats: {
// Examine all modules
maxModules: Infinity,
// Display bailout reasons
optimizationBailout: true
}
});
从外部删除
样式加载器
,并确保从css生成实际的css文件。。。否则,网页包必须以某种方式插入您的样式,对吗
要做到这一点,请使用
不要忘记将
新的minicsExtractPlugin()
添加到您的插件中。最好只用于生产构建。发布配置。@PlayMa256它在我的repo中,但我还是粘贴了,给你!似乎构建成功,但当我尝试导入到另一个vue ap时,出现了[vue warn]:未知自定义元素的错误:-您是否正确注册了该组件?对于递归组件,请确保提供“name”选项。而我确实将组件的名称定义为
MiniC`。有什么想法吗?要尝试一下,你必须运行我不是一个完全的vue专家,我无法帮助你。但这里的关键问题是,在生产过程中,webpack必须使用样式加载器将样式放入页面中,这就是为什么。尝试使用vue.hey np添加迷你css提取插件,是的,修复了主要问题,我遇到的问题是处理Vuejs具有的奇怪组件命名约定。。。谢谢!
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // translates CSS into CommonJS
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
}