阅读 1008

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.cssb.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  // 是否打印编译过程中的日志
    }),
    复制代码
文章分类
前端
文章标签