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'))
  })
  ...
  复制代码