新手快速上手webpack4打包工具的使用详解(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、导包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');

2、预先实例化两个输出文件的对象

const cssExtract = new ExtractTextWebpackPligin('css/a.css'); const lessExtract = new ExtractTextWebpackPligin('css/b.css');

3、在module中预先实例化的对象

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

4、配置插件

plugins: [ cssExtract, lessExtract, ... ]

5、运行命令npm run build查看

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

1.定义disable

const cssExtract = new ExtractTextWebpackPligin({ filename: 'css/a.css', }); const lessExtract = new ExtractTextWebpackPligin({ filename: 'css/b.css', });

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')) }) ...

十二、给css3样式加上前缀

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查看生成的文件