獲取全套webpack 4.x教程，請訪問瓦力博客

在上一小節，我們將開發環境和生產環境區分開來。這一小節，我們來操作如何將樣式文件的代碼分割。

1.安裝

yarn add mini-css-extract-plugin

此插件將CSS提取到單獨的文件中。它為每個包含CSS的JS文件創建一個CSS文件。它支持CSS和SourceMaps的按需加載。

它建立在新的webpack v4功能(模塊類型)之上，并且需要webpack 4才能工作。

注意:MiniCssExtractPlugin 目前不支持HMR support(熱重載)

2.提取css

bulid/plugins.js

const srcPath = require('./base/path');

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

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css樣式提取

let plugins = [

new HtmlWebpackPlugin({

title: '瓦力博客',

template: srcPath.src + '/index.html' //以src/index.html為編譯模板

}),

+new MiniCssExtractPlugin({

+filename: config.NODE_ENV == 'development'?'[name.css]': `${srcPath.css}/[name].[hash].css`,

+chunkFilename: config.NODE_ENV == 'development'?'[id].css': `${srcPath.css}/[id].[hash].css`

+}), //css提取

new CleanWebpackPlugin(),

new webpack.HotModuleReplacementPlugin()

]

module.exports = plugins;

build/module.js

const srcPath = require('./base/path');

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

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

let _module = {

rules:[

{

test:/\.css$/,

use:[

+config.NODE_ENV == 'development'?'style-loader': MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

importLoaders:1

}

},

'postcss-loader'

]

},

{

test:/\.scss$/,

use:[

+config.NODE_ENV == 'development'?'style-loader': MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

importLoaders:2

}

},

'sass-loader',

'postcss-loader'

]

},

{

test: /\.less$/,

use: [

+config.NODE_ENV == 'development'?'style-loader': MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

importLoaders:2

}

},

'less-loader',

'postcss-loader'

]

},

{

test:/\.(png|svg|jpeg|jpg|gif)$/,

use:[

{

loader:'file-loader',

options:{

name:'[name][sha512:hash:base64:7].[ext]', //[path] 上下文環境路徑

outputPath: srcPath.images, //輸出路徑

publicPath: config.NODE_ENV === 'development'?srcPath.images:srcPath.images //公共路徑

}

},

{

loader: 'image-webpack-loader',

options: {

bypassOnDebug: true, // webpack@1.x

disable: true, // webpack@2.x and newer

},

},

]

},

{

test: /\.html$/,

use:[

{

loader:'html-loader',

options:{

arrts:['img:src','img:data-src'],

+minimize:config.NODE_ENV === 'development'? false:false //是否壓縮html

}

}

]

},

{

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

use:[

{

loader:'file-loader',

options:{

name:'[name].[ext]', //[path] 上下文環境路徑

outputPath: srcPath.iconfont, //輸出路徑

publicPath: config.NODE_ENV === 'development'? srcPath.iconfont: srcPath.iconfont, //公共路徑

}

}

]

},

{

test: /\.js$/,

exclude: /(node_modules|bower_components|lib)/,

loader: 'babel-loader'

}

]

}

module.exports = _module;

build/base/config.js

let _mode = process.argv[process.argv.length - 1];

let env = _mode.replace(/--mode=(.+)/g,"$1");

let config = {

NODE_ENV: env == 'development'?'development':'production', //development 開發 production 線上

+publicPath: env == 'development'?'./':'./',

apiUrl:'http://www.waliblog.com',

port: 9999

}

module.exports = config;

package.json

{

"name": "webpack",

"version": "1.0.0",

"description": "webpack測試",

"sideEffects": [

"*.css",

+"*.less",

+"*.scss"

],

"main": "index.js",

"author": "wali",

"private": true,

"license": "MIT",

"scripts": {

"dev": "npx webpack-dev-server --colors --mode=development",

"prod": "npx webpack --colors --mode=production",

"build": "npx webpack --colors --mode=development",

"analyse": "npx webpack --profile --json> stats.json --colors --mode=development"

},

"dependencies": {

"@babel/core": "^7.4.5",

"@babel/plugin-syntax-dynamic-import": "^7.2.0",

"@babel/plugin-transform-runtime": "^7.4.4",

"@babel/polyfill": "^7.4.4",

"@babel/preset-env": "^7.4.5",

"@babel/runtime": "^7.4.5",

"@babel/runtime-corejs2": "^7.4.5",

"autoprefixer": "^9.5.1",

"babel-loader": "^8.0.6",

"clean-webpack-plugin": "^3.0.0",

"css-loader": "^2.1.1",

"extract-text-webpack-plugin": "^3.0.2",

"file-loader": "^3.0.1",

"html-loader": "^0.5.5",

"html-webpack-plugin": "^3.2.0",

"image-webpack-loader": "^4.6.0",

"json5-loader": "^2.0.0",

"less": "^3.9.0",

"less-loader": "^5.0.0",

"loadsh": "^0.0.4",

"lodash": "^4.17.11",

"mini-css-extract-plugin": "^0.7.0",

"node-sass": "^4.12.0",

"postcss-loader": "^3.0.0",

"sass-loader": "^7.1.0",

"style-loader": "^0.23.1",

"webpack": "^4.32.0",

"webpack-cli": "^3.3.2",

"webpack-dev-server": "^3.4.1"

},

"devDependencies": {

"webpack-bundle-analyzer": "^3.3.2"

}

}

index.js

import './assets/css/index.css';

assets/css/index.css

h1{

color: blue;

}

運行webpack

yarn run prod

打開dist/index.html,看到/assets/css/index.css文件樣式生效了

title

歡迎來到瓦力博客

從index.html文件中可以看到css文件被提取出來，并且被引用。

3.提取sass

上面配置已經寫了，在plugins.js和module.js文件中配置了，這里就簡單的驗證一下

修改index.js

import './assets/sass/index.scss';

assets/sass/index.scss

body{

h1{

transform: translate(100px, 100px);

}

}

運行webpack

yarn run prod

打開dist/index.html發現歡迎來到瓦力博客幾個字發生偏移，說明/assets/sass/index.scss樣式已經生效

4.提取less

上面配置已經寫了，在plugins.js和module.js文件中配置了，這里就簡單的驗證一下

修改index.js

import './assets/less/index.less';

assets/less/index.less

body{

h1{

transform: rotate(90deg);

background: red;

text-align: center;

}

}

運行webpack

yarn run prod

打開dist/index.html發現歡迎來到瓦力博客幾個字旋轉90度，背景變紅，字體居中，說明/assets/less/index.less樣式已經生效

5.生產環境css壓縮

安裝optimize-css-assets-webpack-plugin

yarn add optimize-css-assets-webpack-plugin

optimization.js

+ const config = require('./base/config');

+ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let optimization = {

usedExports: true,

splitChunks: {

chunks: 'all',

minSize: 30000,

maxSize: 0,

minChunks: 1,

maxAsyncRequests: 5,

maxInitialRequests: 3,

automaticNameDelimiter: '~',

name: true,

cacheGroups: {

vendors: {

test: /[\\/]node_modules[\\/]/,

priority: -10

},

default: {

minChunks: 2,

priority: -20,

reuseExistingChunk: true

}

}

}

}

+if(config.NODE_ENV != 'development'){

+optimization['minimizer'] = [new OptimizeCssAssetsPlugin({})]

+}

module.exports = optimization

運行開發環境

yarn run build

發現沒有發生什么改變，樣式都在head標簽內

運行生產環境

yarn run prod

發現dist目錄下有css目錄生成，打開css文件，看到css被壓縮了。

6.總結

測試這小節其實遇到幾個問題，小菜寫出來：

調試

這小節的測試命令都變成yarn run prod，是測試生產環境下webpack配置，生產環境下css,less,scss都會被壓縮，去注釋，index.html文件也會被壓縮，去注釋，還要添加域名。這樣一來從生成的文件方面就不容易看出webpack到底是否配置正確。所以小菜將config.js中修改

+publicPath: env == 'development'?'./':'./',

就是生成后index.html文件能直接在本地打開而不報錯。

build/module.js修改

+minimize:config.NODE_ENV === 'development'? false:false //是否壓縮html

生成后index.html文件不要被壓縮，還保留樹形結構，便于查找

less和scss文件樣式不起作用

小菜起初測試css文件，發現打包后css樣式被提取出來，樣式也生效了，但是換成

import './assets/less/index.less';

//或

import './assets/sass/index.scss';

時，在運行打包命令時，樣式沒有被提取出來。后來經過認真分析，發現/webpack/2019/05/24/webpack-10.html一節中配置了Tree Shaking。Tree shaking作用就是當我在index.js文件中使用import './assets/less/index.less'寫法時，會檢測在js文件中是否使用了引入來的less，很明顯在index.js文件中沒有使用，只是單純的引入，所以Tree shaking就會自動幫我們過濾掉這行代碼，就導致最終生成的js文件中沒有樣式，也就提取不出來樣式了。

看了上面的解釋，有的小伙伴可能會問import './assets/css/index.css'也在index.js文件中只引用沒有使用，為什么css文件中的樣式就能夠生效呢？原因還是在/webpack/2019/05/24/webpack-10.html一節中，小菜在package.json中配置了css，沒有配置less,scss。

"sideEffects": [

"*.css",

+"*.less",

+"*.scss"

],

當我們配置*.css,*.less,*.scss后，在Tree shaking時，webpack就會知道忽略css,less,scss所有文件，即使在js文件中css,less,scss只引用沒有使用，也不要刪除這行代碼。

7.代碼回滾

build/module.js

- minimize:config.NODE_ENV === 'development'? false:false //是否壓縮html

+ minimize:config.NODE_ENV === 'development'? false:true //是否壓縮html

build/base/config.js

let _mode = process.argv[process.argv.length - 1];

let env = _mode.replace(/--mode=(.+)/g,"$1");

let config = {

NODE_ENV: env == 'development'?'development':'production', //development 開發 production 線上

-publicPath: env == 'development'?'./':'./',

+publicPath: env == 'development'?'./':'http://www.waliblog.com/',

apiUrl:'http://www.waliblog.com',

port: 9999

}

module.exports = config;

總結

以上是生活随笔為你收集整理的css-6 df15,webpack 样式文件的代码分割(15)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。