初识 Webpack (五) 编译es6和样式分离

目录

文档

一、实战1——识别css和插入header标签

1 .1 实战前期代码

1.2 加前缀

1.3 css压缩（terser-webpack-plugin）

1.4 总结

1.5 最终代码

一、实战2——编译es6

1.1 百度网盘资源

1.2 推荐文章

1.3 具体操作

➀ 浏览器识别es6所需依赖

➁ webpack.config内容配置

二、将样式抽离

1.1 总结操作

➀ 依赖安装

➁ 配置分析

三、webpack 全部知识梳理

---

• 文档

• vue的webpack配置es6转换es5语法、@log、解析原生api、识别es7、代码校验eslint

• style-loader官方文档：https://webpack.js.org/loaders/style-loader/#options

• 一、实战1——识别css和插入header标签

• 1 .1 实战前期代码

1. 百度网盘链接：https://pan.baidu.com/s/1dskJINhkqbU-huvut8mEOw 
   提取码：nmww 
   复制这段内容后打开百度网盘手机App，操作更方便哦
2. 安装依赖  npm install css-loader style-loader -D 和 npm install less less-loader -D
3. 相关配置 webpack.config.js

   rules: [
   			/*1.1 // 问题为什么有两个loader?答:loader的特点是单一,一个专门负责插入一个专门负责解析
   			{
   				// style.loader 它是把css插入到header标签中
   				test: /\.styl$/,
   				use: 'style-loader',
   			},
   			{
   				// 在index.css中引入了a.css,利用css-loader将两个变成1个,css-loader主要是解析@import语法的
   				test: /\.css$/,
   				use: 'css-loader',
   			} */
   			//1.2 多个loader的用法,loader的顺序,默认是从右往左执行,从下到上执行
   			/* {
   				test: /\.css$/,
   				use: ['style-loader', 'css-loader']
   			}, */
   			// 1.3 loader写成对象方式,好处你可以再传一个options无内容可以不传
   			/* {
   				test: /\.css$/,
   				use: [{loader:'style-loader',options:{}}, 'css-loader']
   			}, */
   
   			// 当前使用1.3写法
   			{
   				test: /\.css$/,
   				use: [{
   						loader: 'style-loader'
   					},
   					'css-loader'
   				]
   			},
   		]

   module: {
   		rules: [
   			/* css为例 */
   			{
   				test: /\.css$/,
   				use: [{
   						loader: 'style-loader', // insert header
   						// options: {
   						// 	insert: 'top', // 权重问题注意不是head
   						// },
   					},
   					'css-loader', //@import
   				],
   			},
   			/* less为例 */
   			{
   				test: /\.less$/,
   				use: [{
   						loader: 'style-loader', // insert header
   						/* options: {
   							insert: 'top', // 权重问题注意不是head
   						}, */
   					},
   					'css-loader', //@import
   					'less-loader', // less-> css
   				],
   			},
   		],
   	},

    

4. 新增css文件

   /*
    (一)./webpack-day01/src/index.css 
    在demo.html中我们原先是利用link(<link rel="stylesheet" type="text/css" href="./index.css"/>)引入,
    但是在webpack中我们将demo.html作为了template模板,如果这么操作,不会打包到外面是不可以的
    期望目的:希望css作为模块引入
    操作:在./webpack-day01/src/index.js通过require引入
   */
   @import "./a.css";
   
   body {
   	background: red;
   }
   
   
   /* 
   (二)/在./webpack-day01/src/index.js 文件中写:
   	require('./index.css') 
   (三)执行webpack-dev-server命令,发现不支持,当前你需要一个合适的loader
   
   (四)新建a.css
   body {
   	color: yellow;
   }
   
    */
   

5. 新增less文件

   // index.less
   body{
   	div{
   		border: 10px solid green;
   	}
   }
   
   // index.js引入
   /**
    * require('./index.css')
    * require('./index.less')
    */

    

6. 权重问题（insert: 'top'）

抽离css样式文件mini-css-extract

let MiniCssExtractPlugin = require("mini-css-extract-plugin");


...
module: {
		rules: [
			/* css为例 */
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					/* 利用MiniCssExtractPlugin抽离删除,新增.loader,叫做main.css,下面是全部抽成一个css,如果是多个,则let MiniCssExtractPluginOther再写一个 {
						loader: 'style-loader', // insert header
						//