webpack4+babel7入門到精通(2、樣式的處理)

時間 2019-11-06

標籤 webpack4+babel7 webpack babel 入門精通樣式處理简体版

原文原文鏈接

1、`webpack`使用`css`樣式

webpack默認是支持js的,對於別的css或者typescript必需要安裝加載器css

一、安裝包html

npm install style-loader css-loader less less-loader -D
複製代碼

二、在webpack.config.js中的module配置規則(use中是一個數組,從後面解析到前面)webpack

...
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' }, // 是從右邊開始讀取到左邊的
        ]
      }
    ]
  },
...
複製代碼

三、在src中建立一個css的文件夾,裏面建立a.css和b.less文件css3

四、在index.js中引入樣式文件web

import './css/a.css';
import './css/b.less';
複製代碼

五、啓動服務,查看瀏覽器Elements欄typescript

2、將樣式文件抽取成一個單獨的文件

上面的方式雖然能夠加載樣式文件,可是加載出來的所有的以<style type="text/css">....</style>的方式到頁面中(咱們在開發的時候能夠這樣,可是項目上線後的就但願是單獨的文件),增長了js文件的體積,若是項目大,可能會形成js文件過大加載慢,甚至加載不出的弊端。shell

一、抽取單獨的css目前主要有2個包能夠選擇npm
- 使用插件extract-text-webpack-plugin@next
- 使用插件mini-css-extract-plugin(從此取代上面那個插件的包)

二、安裝包數組

npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
複製代碼

三、使用extract-text-webpack-plugin@next插件的方式瀏覽器

1.引包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
複製代碼

2.修改module中的加載器

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextWebpackPligin.extract({
          use: [
            // { loader: 'style-loader' }, 注意這個地方要刪除
            { loader: 'css-loader' }
          ]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextWebpackPligin.extract({
          use: [
            { loader: 'css-loader' }, 
            { loader: 'less-loader' }
          ]
        })
      }
    ]
},
...
複製代碼

3.使用插件

plugins: [
	...
	new ExtractTextWebpackPligin({
	  filename: 'css/index.css',
	}),
	new HtmlWebpackPlugin({
	  template: './src/index.html',
	  title: 'webpack測試',
	  hash: true,
	  // 先註釋下面的代碼,更好看結果
	  // minify: {
	  // removeAttributeQuotes: true, // 去除雙引號
	  // collapseWhitespace: true, // 合併代碼到一行
	  // }
	})
],
複製代碼

四、在index.js中依然是導入css文件

import './css/a.css';
import './css/b.less';
複製代碼

四、使用mini-css-extract-plugin插件方式

1.導包

const MiniCssTractPlugin = require('mini-css-extract-plugin');
複製代碼

2.在module中配置

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: [
	      MiniCssTractPlugin.loader,
	      { loader: 'css-loader' }
	    ]
	  },
	  {
	    test: /\.less$/,
	    use: [
	      MiniCssTractPlugin.loader,
	      { loader: 'css-loader' }, 
	      { loader: 'less-loader' }
	    ]
	  }
	]
},
複製代碼

3.配置插件

plugins: [
	...
	new MiniCssTractPlugin({
	  filename: 'css/css.css',
	}),
]
複製代碼

4.同樣的在index.js中導包
5.測試

3、對上面抽取樣式優化(抽取出多個樣式文件)

一、上面的方法是將所有的css,less抽取成一個css文件,若是咱們要抽取成單獨的文件

...
// 定義兩個文件
let cssExtract = new ExtractTextWebpackPligin('css/css.css');
let lessExtract = new ExtractTextWebpackPligin('css/less.css');
plugins: [
	// 使用前面定義的插件
	cssExtract,
	lessExtract,
	new webpack.HotModuleReplacementPlugin(), // 熱更新,每次修改後會自動刷新
	new CleanWebpackPlugin(), // 每次打包清空dist文件夾
	...HtmlPlugin,
],
module: {
	rules: [
		{
			test: /\.css$/,
			use: cssExtract.extract({
				use: [
					{ loader: 'css-loader' }
				]
			})
		},
		{
			test: /\.less$/,
			use: lessExtract.extract({
				use: [
					{ loader: 'css-loader' },
					{ loader: 'less-loader' }
				]
			})
		}
	]
},
複製代碼

二、打包

4、關於抽取樣式修改後不刷新的問題(開發的時候依然是加上`style`中)

1.定義disable

const cssExtract = new ExtractTextWebpackPligin({
  filename: 'css/a.css',
  disable: true,
});
const lessExtract = new ExtractTextWebpackPligin({
  filename: 'css/b.css',
  disable: true,
});
複製代碼

2.在modul中使用

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: cssExtract.extract({
	      fallback: 'style-loader',
	      use: [
	        { loader: 'css-loader' }
	      ]
	    })
	  },
	  {
	    test: /\.less$/,
	    use: lessExtract.extract({
	      fallback: 'style-loader',
	      use: [
	        { loader: 'css-loader' }, 
	        { loader: 'less-loader' },
	      ]
	    })
	  }
	]
},
複製代碼

5、關於抽取樣式的時候刪除未使用的樣式(減小樣式打包的體積)

一、安裝包

npm install purifycss-webpack purify-css glob -D
複製代碼

二、導入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
複製代碼

三、使用

...
// 注意必需要在HtmlWebpackPlugin後面使用
new PurifycssWebpack({
  paths: glob.sync(path.resolve('src/*.html'))
})
...
複製代碼

6、使用`postcss`

關於postcss的介紹,提供另一篇中文文章鏈接地址

一、使用postcss實現該功能

二、安裝包

npm install postcss-loader autoprefixer -D
複製代碼

三、配置postcss-loader的加載器

...
{
	test: /\.css$/,
	use: cssExtract.extract({
	  fallback: 'style-loader',
	  use: [
	    { loader: 'css-loader' },
	    { loader: 'postcss-loader'},
	  ]
	})
},
...
複製代碼

四、項目下新建立一個postcss.config.js的配置文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
複製代碼

五、在a.css中寫上css3的樣式

body {
  background: cyan;
  transform:rotate(30deg);
}
複製代碼

六、執行命令npm run build查看生成的文件

7、對樣式文件進行壓縮

一、安裝包

npm install optimize-css-assets-webpack-plugin -D
複製代碼

二、引入

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
複製代碼

三、普通壓縮

plugins: [
	cssExtract,
	lessExtract,
	new OptimizeCSSAssetsPlugin(),
	...
],
複製代碼

四、處理壓縮

new OptimizeCSSAssetsPlugin ({
	// 默認是所有的CSS都壓縮，該字段能夠指定某些要處理的文件
	assetNameRegExp: /\.(sa|sc|c|le)ss$/g, 
	// 指定一個優化css的處理器，默認cssnano
	cssProcessor: require('cssnano'),
	cssProcessorPluginOptions: {
	preset: [  'default', {
		discardComments: { removeAll: true}, //對註釋的處理
		normalizeUnicode: false // 建議false,不然在使用unicode-range的時候會產生亂碼
	}]
	},
	canPrint: true  // 是否打印編譯過程當中的日誌
}),
複製代碼