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

1、webpack使用css样式

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

• 一、安装包

  npm install style-loader css-loader less less-loader -D
  复制代码

• 二、在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' }, // 是从右边开始读取到左边的
          ]
        }
      ]
    },
  ...
  复制代码

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

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

  import './css/a.css';
  import './css/b.less';
  复制代码

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

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

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

• 一、抽取单独的css目前主要有2个包能够选择

  • 使用插件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  // 是否打印编译过程当中的日志
  }),
  复制代码