首頁 > web前端 > css教學 > webpack分離css並單獨打包的方法

webpack分離css並單獨打包的方法

不言
發布: 2018-06-12 10:14:42
原創
2717 人瀏覽過

這篇文章主要介紹了webpack分離css單獨打包的方法,內容挺不錯的,現在分享給大家,也給大家做個參考。

本文介紹了webpack分離css單獨包裝的方法,分享給大家,如下:

CHANGELOG

##2018 -02-08 14:46:06

剛看了下,網上查了webpack單獨打包css,找到的文章,本文比較靠前,但是由於寫的比較混亂,因此重新整理一下內容,更通俗易懂一點。

2018-02-01 14:45:23

由於這篇文章只寫瞭如何把CSS打包成一個CSS文件,沒有講解如何打包成多個CSS文件,經簡友提點,這裡加入了打包成多個CSS檔案的方法。

2016-05-17 11:55

剛學習webpack,記錄webpack如何單獨打包css

##零、介紹以下是個人專案中總結出來的一些基本知識,記錄在這裡,加深自己的印象,也讓大家能夠更快速方便的了解webpack,並且使用它。能力所限,有錯誤或問題,請幫忙指出。

webpack 把所有的資源都當成了一個模組, CSS,Image, JS 字型檔都是資源, 都可以打包到一個bundle.js 檔案.

webpack基本的使用很簡單,但是要方方面面都講解的話內容很多,因此這邊主要講解一下如何使用webpack單獨打包css。

至於打包出來,怎麼加hash值,怎麼替換html中的引用路徑,怎麼上傳到CND可以使用gulp來實現。 【有興趣後面在寫一篇文章】

一、extract-text-webpack-plugin 用法單獨打包css,在webpack需要使用一個插件,extract-text-webpack-plugin

1. 安裝extract-text-webpack-plugin

1

2

3

4

5

<strong>// use npm

npm install extract-text-webpack-plugin --save-dev

 

// or use yarn

yarn add extract-text-webpack-plugin</strong>

登入後複製

2. 配置

載入器裡面寫好插件的設定(使用什麼載入器),在webpack的plugins 裡面設定一個抽離出來的CSS檔案名叫什麼。

1

2

3

4

5

6

7

8

9

10

11

var Ex = require(&#39;extract-text-webpack-plugin&#39;);

// ...省略

module: {

 loaders: [{

  test: /\.less/,

  loader: Ex.extract(&#39;style-loader&#39;, &#39;css-loader&#39;,&#39;less-loader&#39;) // 单独打包出CSS,这里配置注意下

 }]

},

plugins: [

 new Ex("【name】.css")

]

登入後複製

稍微詳細一點,可以參考這個《extract-text-webpack-plugin 的使用及安裝》


下面放兩個實際使用例子,方便大家理解

二、單一頁面應用,把JS裡面的CSS單獨打包#打包一個文件,只需要常規的在入口的js文件引用css文件即可, 打包成多個CSS文件,可以設定多個CSS入口,讓webpack用loader去打包。和分割單獨打包js檔一樣。下面有兩個例子。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// webpack 1.x 配置  【早期使用的配置,那时候是1.x】

/*  webpack.config.js  */

var precss = require(&#39;precss&#39;);

var cssnext = require(&#39;cssnext&#39;);

var autoprefixer = require(&#39;autoprefixer&#39;);

var cssnano = require(&#39;cssnano&#39;);

var Ex = require(&#39;extract-text-webpack-plugin&#39;);

module.exports = {

  entry: &#39;./index.js&#39;,

  output: {

   filename: &#39;index.js&#39;

  },

  module: {

   loaders: [{

    test: /\.less/,

    loader: Ex.extract(&#39;style-loader&#39;, &#39;css-loader&#39;,&#39;less-loader&#39;) // 单独打包出CSS,这里配置注意下

   }]

  },

  plugins: [

   new Ex("【name】.css")

  ]

 }

登入後複製

三、webpack如何打包多個CSS檔案#2. 設定檔新增對應設定

下面直接提供一個完成的多入口CSS打包設定

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

// webpack 3.x 的配置

var path = require(&#39;path&#39;)

var glob = require(&#39;globby&#39;)

var webpack = require(&#39;webpack&#39;)

var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;)

 

// CSS入口配置

var CSS_PATH = {

 css: {

  pattern: [&#39;./src/**/[^_]*.less&#39;, &#39;!./src/old/**/*.less&#39;],

  src: path.join(__dirname, &#39;src&#39;),

  dst: path.resolve(__dirname, &#39;static/build/webpack&#39;),

 }

}

 

// 遍历除所有需要打包的CSS文件路径

function getCSSEntries(config) {

 var fileList = glob.sync(config.pattern)

 return fileList.reduce(function (previous, current) {

  var filePath = path.parse(path.relative(config.src, current))

  var withoutSuffix = path.join(filePath.dir, filePath.name)

  previous[withoutSuffix] = path.resolve(__dirname, current)

  return previous

 }, {})

}

 

module.exports = [

 {

  devtool: &#39;cheap-module-eval-source-map&#39;,

  context: path.resolve(__dirname),

  entry: getCSSEntries(CSS_PATH.css),

  output: {

   path: CSS_PATH.css.dst,

   filename: &#39;[name].css&#39;

  },

  module: {

   rules: [

    {

     test: /\.less$/,

     use: ExtractTextPlugin.extract({

      use: [&#39;css-loader&#39;, &#39;postcss-loader&#39;, &#39;less-loader&#39;]

     })

    }

   ]

  },

  resolve: {

   extensions: [&#39;.less&#39;]

  },

  plugins: [

   new ExtractTextPlugin(&#39;[name].css&#39;),

  ]

 },

// 如果还需要打包js,则可以在这里增加一个单独打包js的处理【根据自己需求来】

// {

//  entry:{},

//  output:{},

//  ... 省略

// }

]

登入後複製

可能有同學還在使用webpack1.x,所以這裡在貼一下webpack1.x 的簡單設定

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// webpack 1.x 版本

// ...其他配置和webpack3.x一样

module: {

  loaders: [

    {

      test: /\.less$/,

      loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")

    },

  ]

}

plugins: [

 new ExtractTextPlugin(&#39;[name].css&#39;),

]

// ...其他配置和webpack3.x一样

登入後複製

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

利用CSS自訂綠色複選框按鈕的樣式

DIV和CSS實現仿京東商城導航條效果


以上是webpack分離css並單獨打包的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板