webpack4對第三方庫css，專案全域性css和vue內聯css檔案提取到單獨的檔案(二十二)
阿新 • • 發佈：2018-11-05
在講解提取css之前，我們先看下專案的架構如下結構：
### 目錄結構如下： demo1 # 工程名 | |--- dist # 打包後生成的目錄檔案 | |--- node_modules # 所有的依賴包 | |--- app | | |---index | | | |-- views # 存放所有vue頁面檔案| | | | |-- index.vue | | | | |-- list.vue | | | |-- components # 存放vue公用的元件 | | | |-- js # 存放js檔案的 | | | |-- css | | | | |-- base.css | | | | |-- index.css | | | |-- store # store倉庫| | | | |--- actions.js | | | | |--- mutations.js | | | | |--- state.js | | | | |--- mutations-types.js | | | | |--- index.js | | | |-- app.js # vue入口配置檔案 | | | |-- router.js # 路由配置檔案 | |--- views | | |-- index.html # html檔案| |--- webpack.config.js # webpack配置檔案 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel轉碼檔案
我們都知道提取css的外掛是使用 extract-text-webpack-plugin 這個外掛，但是在webpack4中需要如下安裝該外掛：
npm i [email protected] -D
首先想讓專案裡面的css打包生效的話，有二種方式，第一種是使用 style-loader自動將css程式碼插入到head標籤style內，第二種方式是使用 extract-text-webpack-plugin 外掛單獨提取一個css檔案，然後在頁面上引入該css檔案即可。
下面我們分別來介紹 第三方庫css檔案，專案全域性的css，及vue中內聯的css或stylus樣式是如何提取到單獨的檔案內的。
首先在介紹之前，我們編寫全域性的css的話，需要拋棄掉stylus了，為什麼要拋棄掉呢？因為styl檔案和extract-text-webpack-plugin 外掛一起使用的話會報錯，比如如下配置程式碼：
module.exports = { module: { rules: [ { // 使用正則去匹配 test: /\.styl$/, use: ExtractTextPlugin.extract({ fallback: { loader: 'style-loader', options: { singleton: true // 表示將頁面上的所有css都放到一個style標籤內 } }, use: [ { loader: 'style-loader', options: {} }, { loader: 'css-loader', options: { minimize: true } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('postcss-cssnext')(), require('cssnano')(), require('postcss-pxtorem')({ rootValue: 16, unitPrecision: 5, propWhiteList: [] }), require('postcss-sprites')() ] } }, { loader: 'stylus-loader', options: {} } ] }) } ] } }
報錯資訊內容如下：
可以看這個文章(https://segmentfault.com/q/1010000009432668), 也是在講webpack配置styl+postcss+ExtractTextPlugin錯誤的問題。
因此對於專案全域性的css檔案建議直接使用css字尾即可，然後我就想在專案的入口檔案app.js 這樣引入css檔案，如下：
// 引入element元件化框架 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 引入樣式檔案 import './css/index.css';
如上程式碼，第三方庫檔案是餓了麼vue元件的樣式，專案全域性的css檔案是 css/index.css, 如上這樣引入進來，index.css
程式碼如下：
@import './base.css'; body { font-size: 18px; display: flex; }
css/base.css 程式碼如下：
body, p , div { margin: 0; padding: 0; }
然後對於 vue 檔案內部編寫css的話，如下使用stylus編寫的，程式碼如下：
<style lang="stylus"> #list-container width 100% </style> <template> <div id="list-container">hello world</div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
因此webpack.config.js 部分程式碼如下配置：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader',
options: {
singleton: false // 為true表示將頁面上的所有css都放到一個style標籤內
}
},
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
}
]
})
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// extractCSS: true,
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
}),
styl: ExtractTextPlugin.extract({
use: 'css-loader!stylus-loader',
fallback: 'vue-style-loader'
})
},
postLoaders: {
html: 'babel-loader'
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
hash: true, //為了開發中js有快取效果，所以加入hash，這樣可以有效避免快取JS。
template: './views/index.html' // 模版檔案
}),
new ClearWebpackPlugin(['dist']),
new ExtractTextPlugin({
filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash:7].css' : 'bundle.css',
allChunks: true
})
]
};
然後在專案中執行 npm run dev 打包，可以看到打包後的bundle.css程式碼如下資訊：
如上打包會把 base.css 和 index.css 及 vue的樣式檔案都打包到 bundle.css檔案內。
但是vue內聯樣式會打包到 head內部的style標籤中，如下截圖所示：
理解ExtractTextWebpackPlugin.extract()方法
ExtractTextWebpackPlugin.extract({ fallback:{ loader: 'style-loader', options: { singleton: false // 為true表示將頁面上的所有css都放到一個style標籤內 } }, use:[] });
fallback：指編譯後用什麼loader來提取css檔案。例如使用style-loader, 然後上面的options是選項，設定singleton為false的話，可以把css檔案單獨提取出來，如果為true的話，會將頁面上所有的css檔案都放在一個style標籤內。
use：指需要什麼樣的loader去編譯檔案。 如.css檔案使用css-loader，如下：
{ loader: 'css-loader', options: { minimize: true } }
現在我們需要解決的是把所有的css檔案打包到一個檔案裡面去。其實很簡單隻要把vue中的配置檔案 extractCSS: true, 會把vue中的樣式檔案提取出來 開啟就可以了，如下部分配置程式碼：
{ test: /\.vue$/, loader: 'vue-loader', options: { extractCSS: true, // 會把vue中的樣式檔案提取出來 loaders: { css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }), styl: ExtractTextPlugin.extract({ use: 'css-loader!stylus-loader', fallback: 'vue-style-loader' }) }, postLoaders: { html: 'babel-loader' } } },
然後執行打包命令，再看下效果如下所示：
JS程式碼如下所示：
因此所有的webpack.config.js 程式碼如下：
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 清除dist目錄下的檔案
const ClearWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入HappyPack外掛
const HappyPack = require('happypack');
// 引入 ParallelUglifyPlugin 外掛
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
// 引入 webpack-deep-scope-plugin 優化
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
module.exports = {
// 入口檔案
entry: {
main: './app/index/app.js'
},
output: {
filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js',
// 將輸出的檔案都放在dist目錄下
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader',
options: {
singleton: false // 為true表示將頁面上的所有css都放到一個style標籤內
}
},
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
}
]
})
},
{
test: /\.(png|jpg)$/,
use: ['happypack/loader?id=image']
},
{
test: /\.js$/,
// 將對.js檔案的處理轉交給id為babel的HappyPack的實列
use: ['happypack/loader?id=babel'],
// loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除檔案
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true, // 會把vue中的樣式檔案提取出來
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
}),
styl: ExtractTextPlugin.extract({
use: 'css-loader!stylus-loader',
fallback: 'vue-style-loader'
})
},
postLoaders: {
html: 'babel-loader'
}
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 處理圖片
use: {
loader: 'url-loader', // 解決打包css檔案中圖片路徑無法解析的問題
options: {
// 打包生成圖片的名字
name: 'img/[name].[contenthash:7].[ext]',
limit: 1024
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 處理字型
use: {
loader: 'file-loader'
}
},
//媒體檔案處理
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 40000,
name: 'media/[name].[hash:7].[ext]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
modules: [
path.join(__dirname, './app'),
'node_modules'
],
extensions: ['*', '.js', '.json', '.vue', '.styl']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
port: 8081,
host: '0.0.0.0',
headers: {
'X-foo': '112233'
},
inline: true,
overlay: true,
stats: 'errors-only'
},
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
plugins: [
new HtmlWebpackPlugin({
hash: true, //為了開發中js有快取效果，所以加入hash，這樣可以有效避免快取JS。
template: './views/index.html' // 模版檔案
}),
new ClearWebpackPlugin(['dist']),
new ExtractTextPlugin({
filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash:7].css' : 'bundle.css',
allChunks: true
}),
/**** 使用HappyPack例項化 *****/
new HappyPack({
// 用唯一的識別符號id來代表當前的HappyPack 處理一類特定的檔案
id: 'babel',
// 如何處理.js檔案，用法和Loader配置是一樣的
loaders: ['babel-loader']
}),
new HappyPack({
id: 'image',
loaders: [{
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: '[name].[ext]'
}
}]
}),
// 使用 ParallelUglifyPlugin 並行壓縮輸出JS程式碼
new ParallelUglifyPlugin({
// 傳遞給 UglifyJS的引數如下：
uglifyJS: {
output: {
/*
是否輸出可讀性較強的程式碼，即會保留空格和製表符，預設為輸出，為了達到更好的壓縮效果，
可以設定為false
*/
beautify: false,
/*
是否保留程式碼中的註釋，預設為保留，為了達到更好的壓縮效果，可以設定為false
*/
comments: false
},
compress: {
/*
是否在UglifyJS刪除沒有用到的程式碼時輸出警告資訊，預設為輸出，可以設定為false關閉這些作用
不大的警告
*/
warnings: false,
/*
是否刪除程式碼中所有的console語句，預設為不刪除，開啟後，會刪除所有的console語句
*/
drop_console: true,
/*
是否內嵌雖然已經定義了，但是隻用到一次的變數，比如將 var x = 1; y = x, 轉換成 y = 5, 預設為不
轉換，為了達到更好的壓縮效果，可以設定為false
*/
collapse_vars: true,
/*
是否提取出現了多次但是沒有定義成變數去引用的靜態值，比如將 x = 'xxx'; y = 'xxx' 轉換成
var a = 'xxxx'; x = a; y = a; 預設為不轉換，為了達到更好的壓縮效果，可以設定為false
*/
reduce_vars: true
}
}
}),
new WebpackDeepScopeAnalysisPlugin(),
// 設定環境變數資訊
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
};