极客观点
项目管理
HarmonyOS
如下，入口文件index.js引入了base.js及index.css，base.js引入了normalize.css及base.css，配置文件如下
问：打包后index.css中只有一小部分normalize.css的代码，其他都没有这是为什么？
[打包后的index.css]
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}[hidden]{display:none}body{margin:0;padding:0}body,html{font-family:MicroSoft YaHei}html{overflow-x:hidden;overflow-y:auto}body,html{height:100%}body{width:100vw}[base.js]
import '../css/normalize.css'
import '../css/base.css'[index.js]
import './base.js'
import '../css/index.css'[webpack.base.conf.js]
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
const CleanWebpackPlugin = require('clean-webpack-plugin')
const PurifyCSS = require('purifycss-webpack')
const glob = require('glob-all')
const WorkboxPlugin = require('workbox-webpack-plugin') // 引入 PWA 插件
const path = require('path')
const productionConfig = require('./webpack.prod.conf.js') // 引入生产环境配置文件
const developmentConfig = require('./webpack.dev.conf.js') // 引入开发环境配置文件
/**
* 根据不同的环境，生成不同的配置
* @param {String} env "development" or "production"
*/
const generateConfig = env => {
// 将需要的 Loader 和 Plugin 单独声明
let scriptLoader = [
{
loader: 'babel-loader'
}
]
let cssLoader = [
'style-loader',
'css-loader',
'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
'sass-loader' // 使用 sass-loader 将 scss 转为 css
]
let cssExtractLoader = [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
'sass-loader' // 使用 sass-loader 将 scss 转为 css
]
let fontLoader = [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
publicPath: 'fonts/',
outputPath: 'fonts/'
}
}
]
let imageLoader = [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 10000, // size <= 10KB
outputPath: '/img/'
}
},
// 图片压缩
{
loader: 'image-webpack-loader',
options: {
// 压缩 jpg/jpeg 图片
mozjpeg: {
progressive: true,
quality: 50 // 压缩率
},
// 压缩 png 图片
pngquant: {
quality: '65-90',
speed: 4
}
}
}
]
let styleLoader =
env === 'production'
? cssExtractLoader // 生产环境下压缩 css 代码
: cssLoader // 开发环境：页内样式嵌入
return {
entry: {
index: './src/js/index.js',
// comany: './src/js/company.js',
},
output: {
publicPath: env === 'development' ? '/' : '../',
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
resolve: {
alias: {
jquery: path.resolve(__dirname, '..', './static/lib/jquery-3.3.1.min.js'),
vue: path.resolve(__dirname, '..', 'static/lib/vue.min.js'),
vuex: path.resolve(__dirname, '..', 'static/lib/vuex.js'),
// vue_router: path.resolve(__dirname, '..', 'static/lib/vue-router.js')
}
},
module: {
rules: [
{ test: /\.js$/, exclude: /(node_modules)/, use: scriptLoader },
{
test: /\.(sa|sc|c)ss$/,
use: styleLoader
},
{
test: /\.html$/,
use: { loader: 'html-loader' }
},
{ test: /\.(eot|woff2?|ttf|svg)$/, use: fontLoader },
{ test: /\.(png|jpg|jpeg|gif)$/, use: imageLoader }
]
},
plugins: [
// 开发环境和生产环境二者均需要的插件
new HtmlWebpackPlugin({
// title: 'webpack4 实战',
filename: './html/index.html',
template: './src/html/index.html',
chunks: ['index'],
minify: {
removeComments: true, // 移除 HTML 中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true // 压缩内联 css
}
}),
// new MiniCssExtractPlugin({
// filename: 'css/[name].css',
// chunkFilename: '[name].min.css'
// }),
// new OptimizeCssAssetsPlugin({
// assetNameRegExp: /\.css$/g,
// cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS 处理器，默认为 cssnano
// cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{}
// canPrint: true //布尔值，指示插件是否可以将消息打印到控制台，默认为 true
// }),
new webpack.ProvidePlugin({
$: 'jquery',
Vue: 'vue',
Vuex: 'vuex',
// Vue
}),
new CleanWebpackPlugin(),
// 清除无用css
new PurifyCSS({
paths: glob.sync([
// 要做css Tree Shaking 的路径文件
path.resolve(__dirname, './*.html'),
path.resolve(__dirname, './src/*.js')
])
}),
// 配置 PWA
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
]
}
}
module.exports = env => {
let config = env === 'production' ? productionConfig : developmentConfig
return merge(generateConfig(env), config) // 合并 公共配置 和 环境配置
}[webpack.prod.conf.js]
// 生产配置主要是拆分代码，压缩 css
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css
module.exports = {
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
jquery: {
name: 'chunk-jquery', // 单独将 jquery 拆包
priority: 15,
test: /[\\/]node_modules[\\/]jquery[\\/]/
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css'
}),
// 压缩 css
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{}
canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true
})
]
}
是不是 TreeShaking 处理掉了，看文档，需要引入 extract-text-webpack-plugin 这个的