配了个vue脚手架,但是在做css treeshaking的时候出现问题

来源:10-20 什么是 Scope Hosting?

西岚Silan

2020-03-04

比如我目前项目用的是iview,但是在做treeshaking的时候,iview的css就被shaking掉了,怎么解决,

我用的是 

purgecss-webpack-plugin

代码在168行

webpack.config.js

const path = require('path');
const os = require('os');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清楚html模板
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成index.html 入口文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css 文件处理
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 复制静态资源
const Webpack = require('webpack');
const vueLoaderPlugin = require('vue-loader/lib/plugin'); // vueloader
const devMode = process.env.NODE_ENV === 'development'; // 是否为开发环境
const HappyPack = require('happypack'); // happypack包
const glob = require('glob-all'); // 路径匹配
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); // happypack多核cpu加快打包构建
const PurgecssPlugin = require('purgecss-webpack-plugin'); //css treeshaking
module.exports = {
entry: {
main: path.resolve(__dirname, './src/main.js')
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].[hash:8].js', //打包到指定目录
chunkFilename: 'js/[name].[hash:8].js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'happypack/loader?id=happyBabel', //开启happypack

exclude: /node_modules/ //忽略Node_modules
},
{
test: /\.vue$/,
use: [
'cache-loader',
'thread-loader',
{
loader: 'vue-loader',

options: {
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
compilerOptions: {
preserveWhitespace: false //去掉空格
}
}
}
]
},

{
test: /\.css$/,
use: [
{
loader: devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader, // 生产环境把css文件从js文件抽离出来
options: {
name: 'css/[name].[hash:8].[ext]',
filename: 'css/[name].[hash:8].[ext]',
chunkFilename: '[id].css',

hmr: devMode
}
},
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
},
{
test: /\.less$/,
use: [
{
loader: devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
options: {
name: 'css/[name].[hash:8].[ext]',
filename: 'css/[name].[hash:8].[ext]',
chunkFilename: '[id].css',
hmr: devMode
}
},
{ loader: 'css-loader' },

{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
},
{ loader: 'less-loader', options: { javascriptEnabled: true } }
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10240,
esModule: false,
fallback: {
// 超过10240的大文件做的操作,图片太大时就应该使用file-loader
loader: 'file-loader',
options: { esModule: false, name: 'img/[name].[hash:8].[ext]' }
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10240,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]'
}
}
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
loader: 'url-loader',
options: {
//   esModule: false, // 该项默认为true,改为false即可
limit: 10240,
fallback: {
// 超过10240的大文件做的操作,图片太大时就应该使用file-loader
loader: 'file-loader',
options: {
publicPath: '../',
name: 'font/[name].[hash:8].[ext]'
}
}
}
}
]
},
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'@': path.resolve(__dirname, './src'),
Components: path.resolve('src/components'),
Assets: path.resolve('src/assets')
},
extensions: ['*', '.js', '.json', '.vue']
},

plugins: [
new CleanWebpackPlugin(),

new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
baseUrl: './'
}),
// new webpack.DllReferencePlugin({ //dll plugin
//   context: __dirname,
//   manifest: require('./vendor-manifest.json')
// }),
// new CopyWebpackPlugin([
//   // 拷贝生成的文件到dist目录 这样每次不必手动去cv
//   { from: 'static', to: 'static' }
// ]),
 new PurgecssPlugin({ // 此处为css treeshaking,但是会影响第三方包的css加载 ,
   paths: glob.sync(`${path.join(__dirname, "src")}/**/*.css`, { nodir: true }) // 不匹配目录,只匹配文件
}),
new vueLoaderPlugin(),

new MiniCssExtractPlugin({
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode
? 'css/[name].[id].css'
: 'css/[name].[id].[hash].css' //如果是index间接引用就是实用到chunk
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './public'),
to: path.resolve(__dirname, './dist')
}
]),

//拷贝静态资源
new HappyPack({
//用id来标识 happypack处理那里类文件
id: 'happyBabel',
//如何处理  用法和loader 的配置一样
loaders: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
cacheDirectory: true
}
}
],
//共享进程池
threadPool: happyThreadPool,
//允许 HappyPack 输出日志
verbose: true
})
]
};


写回答

1回答

双越

2020-03-04

实际项目中的问题,还是建议你自己去解决,因为这要结合完整的项目代码,需要了解的东西很多。这和回答一个知识点问题不一样。

或者,你可以初始化一个最简单的 vue 项目,用上 iview ,看这个最简单的 demo 是否也能复现这个问题?如果能,可以把这个 demo 发给我,这样信息量还少一些。

1
3
双越
回复
西岚Silan
可以 qq 邮箱
2020-03-05
共3条回复

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

查看课程