小胡同学114

小胡同学114 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

小胡同学114 提出了问题 · 9月18日

webpack 打包后waring超过244kb

build之后出现,请问有前辈知道怎么继续优化吗。网上都是说提高门槛的限制。我寻思是不是可以再切割一下。但是小弟实在是想不到还可以怎么切割了,求前辈们帮忙看看
image

这是我的webpack配置代码

webpack.config.base.js

const path = require('path'); // node.js 中的基本包,用于处理路径

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const CopyPlugin = require('copy-webpack-plugin')

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {

entry: {

main: './src/main',

vendors: './src/vendors'

},

output: {

path: path.join(__dirname, '../dist/assets'), // 输出文件所在目录

},

module: {

rules: [

{

test: /.vue$/,

loader: 'vue-loader'

},

{

test: /.css$/, // css 处理

use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

hmr:devMode

},

},

'css-loader',

'postcss-loader'

]

},

{

test: /.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

},

}

},

{

test: /.less$/, // less 处理

use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

hmr:devMode

},

}, // 这样相当于抽离成一个css文件, 如果希望抽离成分别不同的css, 需要再引入MiniCssExtractPlugin,再配置

'css-loader', // css-loader 用来解析@import这种语法

'less-loader',

'postcss-loader'

],

},

{

test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,

use: {

loader: 'url-loader',

options: {

limit: 200 * 1024, // 小于200k变成base64

}

}

},

]

},

resolve: {

extensions: ['.js', '.vue'],

alias: {

'vue': 'vue/dist/vue.esm.js'

}

},

plugins: [

// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

new VueLoaderPlugin(),

new CopyPlugin({

patterns: [

{

from: './src/resource',

to: './resource'

}, {

from: './src/images',

to: './images'

}, {

from: './src/api.js',

to: './'

}

],

}),

// new CleanWebpackPlugin(),

new MiniCssExtractPlugin(),

// new BundleAnalyzerPlugin()

]

}

webpack.config.base.js

const webpack = require('webpack');

const path = require('path');

const webpackBaseConfig = require('./webpack.base.config');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const HTMLWebpackPlugin = require('html-webpack-plugin');

const { merge } = require('webpack-merge');

const fs = require('fs');

module.exports = merge(webpackBaseConfig, {

mode: 'development',

devtool: '#source-map', // devtool由webpack直接提高,将打包后的文件中的错误映射到最初对应的文件中,便于调试

output: {

publicPath: '/assets/',

filename: '[name].js',

chunkFilename: '[name].chunk.js'

},

plugins: [

new MiniCssExtractPlugin({

// Options similar to the same options in webpackOptions.output

// both options are optional

filename: "[name].css",

chunkFilename: "[id].css"

}),

new HTMLWebpackPlugin({

filename: '../index.html',

template: './src/template/index.ejs',

inject: false

}),

],

})

webpack.config.prod.js

const webpack = require('webpack');

const path = require('path');

const webpackBaseConfig = require('./webpack.base.config');

const { merge } = require('webpack-merge');

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

const TerserJSPlugin = require('terser-webpack-plugin');

const HTMLWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const fs = require('fs');

module.exports = merge(webpackBaseConfig, {

mode: 'production',

output: {

publicPath: '/assets/',

filename: '[name].[hash].js',

chunkFilename: '[name].[hash].chunk.js'

},

optimization: { // 优化项

minimizer: [

new TerserJSPlugin({ // 优化js

cache: false, // 是否缓存

parallel: true, // 是否并发打包

sourceMap: true // 源码映射 set to true if you want JS source maps

}),

new OptimizeCSSAssetsPlugin({}) // css 的优化

],

splitChunks: { // 分割代码块,针对多入口

cacheGroups: { // 缓存组

common: { // 公共模块

minSize: 0, // 大于多少抽离

maxSize: 244,

minChunks: 2, // 使用多少次以上抽离抽离

chunks: 'initial' // 从什么地方开始,刚开始

},

vendor: {

name: 'vendors',

priority: 1, // 增加权重, (先抽离第三方)

test: /node_modules/, // 把此目录下的抽离

minSize: 0,

maxSize: 244, // 大于多少抽离

minChunks: 2, // 使用多少次以上抽离抽离

chunks: 'initial' // 从什么地方开始,刚开始

}

}

},

},

plugins: [

new CleanWebpackPlugin(),

new HTMLWebpackPlugin({

filename: '../index.html',

template: './src/template/index.ejs',

inject: false

}),

new MiniCssExtractPlugin({

filename: "[name].[hash].css",

chunkFilename: "[id].[hash].css"

}),

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

}),

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery'

}),

new BundleAnalyzerPlugin({

// 可以是`server`,`static`或`disabled`。

// 在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。

// 在“静态”模式下,会生成带有报告的单个HTML文件。

// 在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。

analyzerMode: 'server',

// 将在“服务器”模式下使用的主机启动HTTP服务器。

analyzerHost: '127.0.0.1',

// 将在“服务器”模式下使用的端口启动HTTP服务器。

analyzerPort: 8888,

// 路径捆绑,将在`static`模式下生成的报告文件。

// 相对于捆绑输出目录。

reportFilename: 'report.html',

// 模块大小默认显示在报告中。

// 应该是`stat`,`parsed`或者`gzip`中的一个。

// 有关更多信息,请参见“定义”一节。

defaultSizes: 'parsed',

// 在默认浏览器中自动打开报告

openAnalyzer: true,

// 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成

generateStatsFile: false,

// 如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。

// 相对于捆绑输出目录。

statsFilename: 'stats.json',

// stats.toJson()方法的选项。

// 例如,您可以使用`source:false`选项排除统计文件中模块的来源。

// 在这里查看更多选项:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21

statsOptions: null,

logLevel: 'info' // 日志级别。可以是'信息','警告','错误'或'沉默'。

})

]

})

关注 3 回答 2

小胡同学114 提出了问题 · 9月17日

解决webpack打包错误 Error: No module factory available

打包的时候出现Error: No module factory available for dependency type: CssDependency
网上其他的做法是修改的vue.config.js.我这个是分出来的webpack 有点不太会。请前辈们帮忙看看image
webpack.base.config.js文件

const path = require('path'); // node.js 中的基本包,用于处理路径

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const CopyPlugin = require('copy-webpack-plugin')

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {

entry: {

main: './src/main',

vendors: './src/vendors'

},

output: {

path: path.join(__dirname, '../dist/assets'), // 输出文件所在目录

},

module: {

rules: [

{

test: /.vue$/,

loader: 'vue-loader'

},

{

test: /.css$/, // css 处理

use: [

MiniCssExtractPlugin.loader,

'css-loader',

'postcss-loader'

]

},

{

test: /.js$/,

use: {

loader: 'babel-loader',

options: {

presets: [ //预设

'@babel/preset-env'

],

plugins:[

// 转es7的语法

["@babel/plugin-proposal-decorators", { "legacy": true }],

["@babel/plugin-proposal-class-properties", { "loose" : true }]

]

}

},

exclude: /node_modules/

},

{

test: /.less$/, // less 处理

use: [

MiniCssExtractPlugin.loader, // 这样相当于抽离成一个css文件, 如果希望抽离成分别不同的css, 需要再引入MiniCssExtractPlugin,再配置

'css-loader', // css-loader 用来解析@import这种语法

'less-loader',

'postcss-loader'

],

},

{

test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,

use: {

loader: 'url-loader',

options: {

limit: 200 * 1024, // 小于200k变成base64

}

}

},

]

},

resolve: {

extensions: ['.js', '.vue'],

alias: {

'vue': 'vue/dist/vue.esm.js'

}

},

plugins: [

// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

new VueLoaderPlugin(),

new CopyPlugin({

patterns: [

{

from: './src/resource',

to: './resource'

}, {

from: './src/images',

to: './images'

}, {

from: './src/api.js',

to: './'

}

],

}),

new CleanWebpackPlugin()

]

}

webpack.prod.config.js文件

const webpack = require('webpack');

const path = require('path');

const webpackBaseConfig = require('./webpack.base.config');

const { merge } = require('webpack-merge');

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

const HTMLWebpackPlugin = require('html-webpack-plugin');

const fs = require('fs');

module.exports = merge(webpackBaseConfig, {

mode: 'production',

output: {

publicPath: '/assets/',

filename: '[name].[hash].js',

chunkFilename: '[name].[hash].chunk.js'

},

optimization: { // 优化项

minimizer: [

new UglifyJsPlugin({ // 优化js

cache: true, // 是否缓存

parallel: true, // 是否并发打包

sourceMap: true // 源码映射 set to true if you want JS source maps

}),

new OptimizeCSSAssetsPlugin({}) // css 的优化

],

splitChunks: { // 分割代码块,针对多入口

cacheGroups: { // 缓存组

common: { // 公共模块

minSize: 0, // 大于多少抽离

minChunks: 2, // 使用多少次以上抽离抽离

chunks: 'initial' // 从什么地方开始,刚开始

},

vendor: {

name: 'vendors',

priority: 1, // 增加权重, (先抽离第三方)

test: /node_modules/, // 把此目录下的抽离

minSize: 0, // 大于多少抽离

minChunks: 2, // 使用多少次以上抽离抽离

chunks: 'initial' // 从什么地方开始,刚开始

}

}

},

},

plugins: [

new HTMLWebpackPlugin({

filename: '../index.html',

template: './src/template/index.ejs',

inject: false

}),

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

}),

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery'

})

]

})

关注 2 回答 1

小胡同学114 赞了回答 · 9月16日

解决webpack merge插件报错

const { merge } = require('webpack-merge');

关注 4 回答 3

小胡同学114 赞了回答 · 9月16日

解决webpack merge插件报错

参考一下这个网友的解决方案:https://jianshu.com/p/5eda1ee...
或者是https://www.pianshen.com/arti...
改成
webpackMerge.merge()

关注 4 回答 3

小胡同学114 提出了问题 · 9月16日

解决webpack merge插件报错

再尝试使用merge插件的时候报错,webpackmerge不是一个方法。插件也安装了。还是不行 请问有前辈遇到过吗image
这是我的webpack的配置

这个是webpack.base.config.js


const path = require('path'); // node.js 中的基本包,用于处理路径

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: path.join(__dirname,'../src/main.js'), // path.jion()将两个参数代表的路径相加组合起来,__dirname代表当前文件所在目录

output: {

filename: 'bundle.js', //输出文件的文件名

path: path.join(__dirname,'../dist') // 输出文件所在目录

},

module: {

rules: [

{

test: /.vue$/,

loader: 'vue-loader'

},

{

test: /.js$/,

exclude: /node_modules/,

use: [

{

loader: 'babel-loader',

options: {

presets: ['env']

}

}

]

},

]

},

plugins: [

// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

new VueLoaderPlugin(),

new HTMLWebpackPlugin({ //创建 .html 并自动引入打包后的文件

template: 'index.html', // 参照最初创建的 .html 来生成 .html

inject: true

})

]

}

这个是dev

const webpack = require('webpack');

const path = require('path');

const webpackBaseConfig = require('./webpack.base.config');

const webpackMerge = require('webpack-merge');

const fs = require('fs');

module.exports = webpackMerge(webpackBaseConfig, {

mode: 'development',

})

这个是prod

const webpack = require('webpack');

const path = require('path');

const webpackBaseConfig = require('./webpack.base.config');

const webpackMerge = require('webpack-merge');

const fs = require('fs');

module.exports = webpackMerge(webpackBaseConfig, {

mode: 'production',

})

关注 4 回答 3

小胡同学114 赞了回答 · 9月15日

解决使用webpack4打包时,提示超出默认值,有没有什么办法切割从小一点呢

你跑下report看下哪些包大,进行拆分;

关注 3 回答 2

小胡同学114 提出了问题 · 9月15日

解决使用webpack4打包时,提示超出默认值,有没有什么办法切割从小一点呢

`WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.`

网上都说把默认值改大就行,但是我在想是不是可以把这些包在改小一点呢。新手求前辈们解答一下

关注 3 回答 2

小胡同学114 赞了回答 · 9月15日

解决webpack. mini-css-extract-plugin ivew样式失败

  1. style-loader 和 MiniCssExtractPlugin.loader 一起使用会不会有问题,一个是把 CSS 插入到 DOM 中,另一个是提取 CSS 到样式文件。
  2. 引入 Iview 的样式直接在 main.js 引入就可以了把 import 'view-design/dist/styles/iview.css';

关注 2 回答 1

小胡同学114 提出了问题 · 9月14日

解决webpack. mini-css-extract-plugin ivew样式失败

    // 修改 webppack 配置文件后需重启才能生效

const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const CopyPlugin = require('copy-webpack-plugin')

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

entry: {

main: './src/main',

vendors: './src/vendors'

},

output: {

path: path.join(__dirname, '../dist/assets'), // 输出文件所在目录

},

module: {

rules: [

{

test: /.vue$/,

use: [

{

loader: 'vue-loader'

},

{

loader: 'iview-loader',

options: {

prefix: false

}

}

]

},

{

test: /.css$/,

use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

publicPaht: '../'

}

},

'style-loader', // 为 css 创建 style 标签并置入其中插入页面

'css-loader', // 处理 css

'postcss-loader', // 浏览器兼容问题

],

include:[

/src/,

'/node_modules/view-design/dist/styles/iview.css'

]

},

{

test: /.less$/,

use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

publicPaht: '../'

}

},

'style-loader',

'css-loader',

'postcss-loader',

'less-loader' // loader 由下往上依次开始处理

]

},

{

test: /.js$/,

exclude: /node_modules/,

use: [

{

loader: 'babel-loader',

options: {

presets: ['env']

}

}

]

},

// 管理字体文件

{

test: /.(woff|woff2|eot|ttf|otf)$/,

use: [

{

loader: 'file-loader',

options: {

name: 'img/[name].[hash:8].[ext]'

}

}

]

},

{

test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,

loader: 'url-loader?limit=1024'

},

{

test: /.(html|tpl)$/,

loader: 'html-loader'

},

{

test: require.resolve('numbro'),

loader: 'expose-loader?numbro'

},

{

test: require.resolve('moment'),

loader: 'expose-loader?moment'

},

{

test: require.resolve('pikaday'),

loader: 'expose-loader?Pikaday'

},

{

test: require.resolve('zeroclipboard'),

loader: 'expose-loader?ZeroClipboard'

}

]

},

resolve: {

extensions: ['.js', '.vue'],

alias: {

'vue': 'vue/dist/vue.esm.js'

}

},

plugins: [

// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

new VueLoaderPlugin(),

new CopyPlugin({

patterns: [

{

from: './src/resource',

to: './resource'

}, {

from: './src/images',

to: './images'

}, {

from: './src/api.js',

to: './'

}

],

}),

new MiniCssExtractPlugin({

// Options similar to the same options in webpackOptions.output

// both options are optional

filename: "[name].css",

chunkFilename: "[id].css"

})

]

}

在使用MiniCssExtractPlugin之后启动项目就报ivew样式的错,有前辈们遇到过一样的情况吗
image.png

关注 2 回答 1

小胡同学114 提出了问题 · 5月27日

vue-aplayer 怎么修改样式

项目中用了vue-aplayer 但是修改样式怎么都修改不了,求大神们指教一下

关注 2 回答 1

认证与成就

  • 获得 1 次点赞
  • 获得 10 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 9 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-02-01
个人主页被 181 人浏览