webpack4+babel7入门到精通(二、样式的处理)

一、`webpack`使用`css`样式

webpack默认是支持js的,对于别的css或者typescript必须要安装加载器

1、安装包

npm install style-loader css-loader less less-loader -D

2、在webpack.config.js中的module配置规则(use中是一个数组,从后面解析到前面)

...
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' }, // 是从右边开始读取到左边的
        ]
      }
    ]
  },
...

3、在src中创建一个css的文件夹,里面创建a.css和b.less文件

4、在index.js中引入样式文件

import './css/a.css';
import './css/b.less';

5、启动服务,查看浏览器Elements栏

二、将样式文件抽取成一个单独的文件

上面的方式虽然可以加载样式文件,但是加载出来的全部的以<style type="text/css">....</style>的方式到页面中(我们在开发的时候可以这样,但是项目上线后的就希望是单独的文件),增加了js文件的体积,如果项目大,可能会造成js文件过大加载慢,甚至加载不出的弊端。

1、抽取单独的css目前主要有2个包可以选择
- 使用插件extract-text-webpack-plugin@next
- 使用插件mini-css-extract-plugin(今后取代上面那个插件的包)

2、安装包

npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D

3、使用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, // 合并代码到一行
	  // }
	})
],

4、在index.js中依然是导入css文件

import './css/a.css';
import './css/b.less';

4、使用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.测试

三、对上面抽取样式优化(抽取出多个样式文件)

1、上面的方法是将全部的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' }
				]
			})
		}
	]
},

2、打包

四、关于抽取样式修改后不刷新的问题(开发的时候依然是加上`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' },
	      ]
	    })
	  }
	]
},

五、关于抽取样式的时候删除未使用的样式(减少样式打包的体积)

1、安装包

npm install purifycss-webpack purify-css glob -D

2、导入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');

3、使用

...
// 注意必须要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
  paths: glob.sync(path.resolve('src/*.html'))
})
...

六、使用`postcss`

关于postcss的介绍,提供另外一篇中文文章连接地址

1、使用postcss实现该功能

2、安装包

npm install postcss-loader autoprefixer -D

3、配置postcss-loader的加载器

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

4、项目下新创建一个postcss.config.js的配置文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

5、在a.css中写上css3的样式

body {
  background: cyan;
  transform:rotate(30deg);
}

6、执行命令npm run build查看生成的文件

七、对样式文件进行压缩

1、安装包

npm install optimize-css-assets-webpack-plugin -D

2、引入

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

3、普通压缩

plugins: [
	cssExtract,
	lessExtract,
	new OptimizeCSSAssetsPlugin(),
	...
],

4、处理压缩

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  // 是否打印编译过程中的日志
}),

webpack4+babel7入门到精通(二、样式的处理)

一、webpack使用css样式

二、将样式文件抽取成一个单独的文件

三、对上面抽取样式优化(抽取出多个样式文件)

四、关于抽取样式修改后不刷新的问题(开发的时候依然是加上style中)

五、关于抽取样式的时候删除未使用的样式(减少样式打包的体积)

六、使用postcss

七、对样式文件进行压缩

一、`webpack`使用`css`样式

四、关于抽取样式修改后不刷新的问题(开发的时候依然是加上`style`中)

六、使用`postcss`