Webpack-css/scssファイルの処理
css
がhtml
において一般的に使用される導入形態は、
と
の2 のラベルによってhtml
の に される であり、 はwebpack
と み わせて の が されている.1、
style
ラベル 1:
css-loader
とstyle-loader
webpack
をインストールすると、 スタイルファイルを する がわかりません.これらのローダが です.css-loader
: にcss
ファイルをロードし、css
の を するために されます. えば、@import
およびurl()
などの ファイルを する :https://github.com/webpack-contrib/css-loader style-loader
:css-loader
の をJS
コードに し、 にstyle
ラベルを に してCSS
コードを にします.ステップ2:プロファイルの
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
main: './css-handle/app.js'
},
output: {
path: path.resolve(__dirname, 'build'), //
filename: '[name].bundle.js', //
publicPath: './', // CDN
chunkFilename: '[name].js' //
},
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}]
}]
},
//
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
common: {
name: 'common',
minSize: 0, // , 30kb, 0,common , 30kb
minChunks: 2, //
priority: 5, //
reuseExistingChunk: true //
},
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
plugins: [
new CleanWebpackPlugin(), // ,
new BundleAnalyzerPlugin(),
new HtmlWebpackPlugin({
// HTML
title: ' HTML',
minify: {
// HTML
removeComments: true, // HTML
collapseWhitespace: true, //
minifyCSS: true // css
},
filename: 'index.html', //
template: path.resolve(__dirname, 'index.html'), // HTML
chunks: ['main'] // entry main
})
]
}
:module.rules.use のloaderの .Webpackルールによると、 に くloaderはまず され、 から へ くと から され、 から へ くと から されます.
ここでcss-loaderはstyle-loaderより に し、cssファイルをロードしてからスタイルをDOMに する があります.
ステップ3:パッケージテスト
// a.js
console.log('A')
export default 'A'
// app.js
import '../assets/css/base.css'
import(/* webpackChunkName: 'a'*/ './a').then((a) => {
console.log(a)
})
cnpm run dev
ポートファイルapp.js
base.css
ファイルに のスタイルファイルが された 、パッケージ してみましょう.// style.css
html {
font-size: 16px;
}
// base.css
@import './style.css';
*, body {
margin: 0;
padding: 0;
}
html {
background-color: red;
}
// app.js
import '../assets/css/base.css'
import(/* webpackChunkName: 'a'*/ './a').then((a) => {
console.log(a)
})
スタイルファイルには
style
のラベルが していることがわかります.された
html
ファイルにはスタイルファイルコードが されていないことがわかりますが、ブラウザがindex.html
ファイルを くと スタイルがあるのはなぜですか?これは、スタイルファイル
base.css
とエントリファイルapp.js
が にmain.bundle.js
ファイルにパッケージされ、ブラウザがindex.html
ファイルをロードするとスクリプトが に され、スタイルがstyle
ラベルを してDOM
に されるためである.main.bundle.js
でbase.css
を つけることができます2、
link
ラベル style-loader
の バージョンでは、link
のラベル ファイルスタイルはサポートされていません.1つのjs
ファイルに のcss
ファイルを すると、 のlink
ラベルが され、html
の link
ラベルがネットワーク を するため、この は に されます.ここで たちはただ して、このような の を っていればいいのです.
まず、
style-loade
rバージョンを0.20.0
に げ、 を します.module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader/url'
}, {
loader: 'file-loader'
}]
}]
},
そしてテイクアウト
:https://blog.csdn.net/TyrionJ/article/details/79288287
3、
css
を するCSS
ファイルを に する がある は、mini-css-extract-pluginプラグインを する があります.は
extract-text-webpack-plugin
プラグインを していましたが、このプラグインはwebpack4
とあまり していません. はmini-css-extract-plugin
を しています.mini-css-extract-plugin
npm i mini-css-extract-plugin --save-dev
optimize-css-assets-webpack-plugin
プラグインを してcss
を npm install optimize-css-assets-webpack-plugin --save-dev
インストール
sass
:npm i node-sass sass-loader --save-dev
CSS
にブラウザ を けてpostcss-loaderとautoprefixer をインストールします.npm install postcss-loader autoprefixer --save-dev
プロファイルの :
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
entry: {
main: './css-handle/app.js'
},
output: {
path: path.resolve(__dirname, 'build'), //
filename: '[name].bundle.js', //
publicPath: './', // CDN
chunkFilename: '[name].js' //
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/, // .scss .css loader
use: [{
loader: 'style-loader'
},
{
/** webpack loader used always at the end of loaders list */
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
importLoaders: 2 // css css, loader, postcss-loader sass-loader
}
},
{
// postcss css
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
},
{
loader: 'sass-loader' // sass-loader scss css
}]
}]
},
//
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
common: {
name: 'common',
minSize: 0, // , 30kb, 0,common , 30kb
minChunks: 2, //
priority: 5, //
reuseExistingChunk: true //
},
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
plugins: [
new CleanWebpackPlugin(), // ,
new BundleAnalyzerPlugin(),
new HtmlWebpackPlugin({
// HTML
title: ' HTML',
minify: {
// HTML
removeComments: true, // HTML
collapseWhitespace: true, //
minifyCSS: true // css
},
filename: 'index.html', //
template: path.resolve(__dirname, 'index.html'), // HTML
chunks: ['main'] // entry main
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'), // \ CSS CSS , cssnano
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, // cssProcesso
canPrint: true // , , true
})
]
}
パッケージテスト: が されていない に、スタイルファイルはエントリ
js
ファイルにパッケージされ、ブラウザロード js
でstyle
またはlink
スタイルが に されます. css
はパッケージ されてから なり、css、scss
ファイルはcss
ファイルに されて し、link
はhtml
に され、js
によって に されることはありません.html {
font-size: 16px;
background-color: red
}
*,body {
margin: 0;
padding: 0
}
html {
background-color: #000
}
.example {
display: grid;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));
background: linear-gradient(180deg,#fff,#000)
}
のコードを すると
に、ブラウザがindex.htmlを き、jsエントリファイルから にロードされないスタイルファイルが していることを します.しかし、スタイルファイルは り ファイルにパッケージされています.