一 背景
最近在做一個項目，項目本身是用vue-cli創建的單頁面應用，由于項目擴展需要創建多頁面，所以需要對不同的html分別進行css文件打包。于是開始研究extract-text-webpack-plugin插件。
二 插件介紹
打包樣式有兩種方法，一種是使用style-loader自動將css代碼放到生成的style標簽中，并且插入到head標簽里。另一種就是使用extract-text-webpack-plugin插件，將樣式文件單獨打包，打包輸出的文件由配置文件中的output屬性指定。然后我們在入口HTML頁面寫個link標簽引入這個打包后的樣式文件。
三 插件使用
1 插件安裝：
# for webpack 3 npm install --save-dev extract-text-webpack-plugin# for webpack 2 npm install --save-dev extract-text-webpack-plugin@2.1.2# for webpack 1 npm install --save-dev extract-text-webpack-plugin@1.0.1
2 插件使用
在webpack.config.js中引入
const ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = { module: { rules: [ { test: //.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", // 編譯后用什么loader來提取css文件 use: "css-loader" // 指需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loader }) } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ]}多實例
在實例上也有個 extract function。如果你有1個以上的 ExtractTextPlugin 的實例，你應該使用實例上的 extract。
const ExtractTextPlugin = require('extract-text-webpack-plugin');// Create multiple instancesconst extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');module.exports = { module: { rules: [ { test: //.css$/, use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) }, { test: //.less$/i, use: extractLESS.extract([ 'css-loader', 'less-loader' ]) }, ] }, plugins: [ extractCSS, extractLESS ]};抽取 Less 或者 Sass
配置是相同的, 根據需求使用 sass-loader 取代 less-loader。
const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { module: { rules: [ { test: //.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }, plugins: [ new ExtractTextPlugin('style.css') //if you want to pass in options, you can do so: //new ExtractTextPlugin({ // filename: 'style.css' //}) ]}url() Resolving
如果你運行 webpack 發現 urls resolve 不對。你可以使用 options 擴展 loader 功能。 url: false 使得你的路徑 resolve 的時候不會發生任何變化。
const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { module: { rules: [ { test: //.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { // If you are having trouble with urls not resolving add this setting. // See https://github.com/webpack-contrib/css-loader#url url: false, minimize: true, sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true } } ] }) } ] }}改變文件名
filename 參數可以是 Function。通過傳入 getPath 去處理像 css/[name].css 的格式，返回一個真正的文件名， css/js/a.css。你可以替換 css/js 為 css，這樣你可以得到一個新的路徑 css/a.css。
entry: { 'js/a': "./a"},plugins: [ new ExtractTextPlugin({ filename: (getPath) => { return getPath('css/[name].css').replace('css/js', 'css'); }, allChunks: true })]以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
