webpack使用插件将css抽取出来
生活随笔
收集整理的這篇文章主要介紹了
webpack使用插件将css抽取出来
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言：
我們使用加載器來加載css樣式，但是此時css是通過js動態創建<style>標簽來寫入，如果不希望這樣做，
可以使用插件 extract-text-webpack-plugin 將css抽取出來，并生成一個main.css的文件，最終在index.html中通過<link>的形式加載它。
使用加載器來加載css樣式參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83081468
通過npm安裝插件
打開項目目錄，在目錄下打開cmd,輸入：
npm install extract-text-webpack-plugin --save-dev修改代碼：
然后在配置文件中導入插件，打開webpack.config.js：
var path = require('path'); //導入插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); var config = {entry:{main:'./main'},output:{path:path.join(__dirname,'./dist'),publicPath:'/dist/',filename:'main.js'},module:{rules:[{test:/\.css$/,use: ExtractTextPlugin.extract({use:'css-loader',fallback:'style-loader'})??????????}]},plugins:[//提取后的css文件將其命名為mian.cssnew ExtractTextPlugin("main.css")]};module.exports = config;修改inex.html:
<!DOCTYPE HTML> <html><head><title> hello webpack </title><link rel="stylesheet" type="text/css" href="/dist/main.css"></link><meta charset="utf-8"></head><body><div id="app">Hello Webpack!!!!!!</div><script type="text/javascript" src="/dist/main.js"></script></body> </html>重新啟動服務，就可以看到<style>已經沒有了，通過link引入的main.css已經生效。
如果在啟動服務時出錯，參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83087654
總結
以上是生活随笔為你收集整理的webpack使用插件将css抽取出来的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack使用加载器来加载CSS样式
- 下一篇： Use Chunks.groupsIte