官方例子
通过style标签
// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [{loader:'style-loader'},{loader:'css-loader'}]
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: 'css'
})
]
};
// index.js
import './css/base.css';
import './css/common.css';
// base.css
通过link引入css,不能指定路径
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [{loader:'style-loader/url'},{loader:'file-loader'}]
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: 'css'
})
]
};
通过useable控制样式显示
// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
// publicPath: './dist/',
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [{loader:'style-loader/useable'},{loader:'css-loader'}]
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: 'css'
})
]
};
// index.js
import base from './css/base.css';
import common from './css/common.css';
base.unuse();
base.use();
css tree-shaking, 处理无用代码
$_> npm i -D purifycss-webpack purify-css glob-all
// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const glob = require('glob-all');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
]
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: 'css'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new PurifyCSSPlugin({
paths: glob.sync([path.join(__dirname, './index.html'),path.join(__dirname, './src/index.js')]),
}) // 需要处理的文件
],
mode: 'development'
};
// base.css
body {
display: flex;
background: orange;
}
.box {
color: #000;
}
.box2 { // 这个类名会被删除
color: #fff;
}
// index.js
import './css/base.css';
let div = document.createElement('div');
div.classList.add('box');
document.body.appendChild(div);
压缩css
$_> npm i -D optimize-css-assets-webpack-plugin cssnano
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCss = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/scripts/index.js',
output: {
filename: 'scripts/[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
]
},
]
},
plugins: [
new CleanWebpackPlugin('/dist/'),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
minify: { // 压缩
collapseInlineTagWhitespace: true,
collapseWhitespace: true
},
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "[id].css",
}),
new optimizeCss({ // 压缩css
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
]
};
网友评论