Webpack4-對支持Css/Less/Sass

那麼咱們寫一個頁面除了有JS文件意外咱們還會引入不少的CSS文件,以及咱們還會編寫less文件scss文件等。css

那麼本省咱們的webpack默認只能處理 .js 的文件,也就是這些其餘的文件咱們需用經過第三方的loader才能處理。html

那麼咱們先在以前的項目中添加一個css文件,而後在index.html文件中將他引入。jquery

 

 

 

這是頁面渲染出來的結果,那麼咱們看到這樣引入確實是沒有問題!也可使用!webpack

 

可是咱們使用的是webpack,而webpack能夠幫咱們減小頁面對服務器發起屢次請求的問題,若是咱們這樣寫的話那麼頁面就會想服務器發起一次請求。這樣咱們就和沒有使用webpack同樣沒有區別了!es6


那麼咱們來看下載webpack下要如何引入css文件! 那麼咱們打開 index.js 文件,在該文件下加入以下代碼web

import './index.css' (後門跟的是文件的路徑,包過less和scss文件也是這樣引入)

ok!這樣引入之後咱們就只須要在 index.html 文件中引入一個 index.js 文件便可。正則表達式

注意有坑:那麼我前面說過webpack要打包js文件,可是他只支持打包js文件,那麼咱們這樣引入的css文件是不起做用的,並且也不會打包成功npm

那麼要怎麼辦呢?咱們這個使用就須要使用第三方的loader才能完成編譯json


使用第三方 loader 來使webpack支持打包css文件,那麼這裏分別列出css less sass 所對應的 loader瀏覽器

注意有坑: less和sass本省最後也要翻譯成css,因此style-loader和css-loader是必裝項
Css: style-loader css-loader
Less: less-loader
Sass: sass-loader

那麼這裏使用cnpm來安裝!若是使用npm有可能會安裝不上
安裝命令: cnpm i style-loader -D cnpm i css-loader -D

那麼安裝完成之後咱們還須要建立一個叫作 webpack.config.json的文件!那麼這個文件通常狀況下你的項目是不會有的

因此咱們須要到webpack的官網上去拷貝一份 https://webpack.js.org/ 

咱們手動建立一個名爲 "webpack.config.json" 的文件,將如下的內容粘貼進去,而且咱們須要添加一些配置

const path = require('path');
module.exports = {
  entry: './src/index.js', //表明單獨執行 "webpack" 命令後 在沒有指定須要打包的js文件時默認打包的文件
  output: {
    path: path.resolve(__dirname, 'dist'), //打包好後的文件存放的文件夾路徑
    filename: 'bundle.js' //打包好後的文件的路徑
  },
 module:{ //這個節點 用於配置 全部第三方模塊加載器
    rules: [ //全部第三方模塊的 匹配規則
      //use 表明匹配的文件 使用對應的loader進行處理
      { test:/\.css$/,use: ['style-loader', 'css-loader']}, //匹配全部已.css結尾的文件
      { test:/\.less$/,use: ['style-loader', 'css-loader','less-loader']},
      { test:/\.scss$/,use: ['style-loader', 'css-loader','sass-loader']}
    ]
  }
};

這裏是經過正則表達式來匹配文件,use表明當前匹配的文件用哪個loader來處理。

那麼若是你須要打包 less文件或者scss文件就經過cnpm i less-loader -D 安裝完後添加一個rules的元素便可


 

 而後咱們使用webpack命令從新編譯一下項目!

編譯完成後生成的bundle.js文件

這個時候咱們修改下index.html,改成只引入bundle.js文件,那麼我是有一個本身寫的index.js文件和index.css文件

index.js文件中就是一個彈窗效果,index.css文件中是將全部的span標籤內的文字變成紅色

咱們打開瀏覽器訪問一下!

 

能夠看到一切正常輸出,那麼這樣咱們就實現了將css文件和js文件打包在一塊兒,而後只須要引入一個.js文件便可


最後在看下個人index.js文件和index.css文件,能夠看到我這裏還引入了一個jquery,webpack也幫我一塊兒打包進去了!

也就是說我只須要引入一個bundle.js文件!就至關於引入了 index.js index.css jquery.js 三個文件!而且webpack會幫你處理es6代碼的兼容性問題

 

webpack-dev-server(自動編譯)使用

webpack 對css/less/sass的支持

相關文章
相關標籤/搜索