webpack4.x学习笔记五，js支持ES6；css支持less、浏览器兼容

栏目: CSS · 发布时间: 5年前

内容简介：webpack.config.js修改后的内容更多文档参考babel-loaderapp.js修改后内容

执行命令

npm install --save-dev babel-loader @babel/core @babel/preset-env
复制代码

修改webpack.config.js

webpack.config.js修改后的内容

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {
  mode:'development',
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename:'js/[name]-[hash].js'
  },
  module: {
		rules: [
					{
						test:/\.css$/,
						use: extractCSS.extract({
				          	fallback: "style-loader", // 编译后用什么loader来提取css文件
		          			use: [
		          				{loader:'css-loader'},
		          			]
		        		})
					},
					{
						test:/\.js$/,  //添加正则，处理js文件
						use: [
								//把ES6语法转换为ES5
								{loader:'babel-loader',options:{"presets": ["@babel/preset-env"]}} 
							]
					}
				]
	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'./src/template/index.html',
			title:'this is webpack title'
		}),
		extractCSS
	]
};
复制代码

更多文档参考babel-loader

修改src/js/app.js

app.js修改后内容

require('../css/style.css'); 

function hello(str){
	console.log(str);
}
hello('hello world!');

{
	let es6 = 'welcome es6';
	console.log(es6);
}
复制代码

浏览器访问dist/index.html

webpack4.x学习笔记五，js支持ES6；css支持less、浏览器兼容

css支持less

安装插件 less-loader

执行命令 npm install --save-dev less less-loader

添加src/css/style.less文件

*{
	padding:0;
	margin:0;
}
body{
	background-color: #f5f5f5;
}
#app{
	width: 200px;
	height: 200px;
	div {
		width: 100px;
		height:100px;
		color:green;
		border:1px pink solid;
	}
}
复制代码

修改src/template/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<div id="app">
		<div>less 解析</div>
	</div>
</body>
</html>
复制代码

修改src/js/app.js

删除 style.css文件 引入style.less文件

require('../css/style.less'); 

function hello(str){
	console.log(str);
}
hello('hello world!');
{
	let es6 = 'welcome es6';
	console.log(es6);
}
复制代码

修改webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {
  mode:'development',
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename:'js/[name]-[hash].js'
  },
  module: {
		rules: [
					{
						test:/\.css$/,
						use: extractCSS.extract({
				          	fallback: "style-loader", // 编译后用什么loader来提取css文件
		          			use: [
		          				{loader:'css-loader'},
		          			]
		        		})
					},
					{
						test:/\.less$/,
						use: extractCSS.extract({
				          	fallback: "style-loader", // 编译后用什么loader来提取css文件
		          			use: [
		          				{loader:'css-loader'},
		          				{loader:'less-loader'}
		          			]
		        		})
					},
					{
						test:/\.js$/,  //添加正则，处理js文件
						use: [
								//把ES6语法转换为ES5
								{loader:'babel-loader',options:{"presets": ["@babel/preset-env"]}} 
							]
					}
				]
	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'./src/template/index.html',
			title:'this is webpack title'
		}),
		extractCSS
	]
};
复制代码

说明

{
    test:/\.less$/,
    use: extractCSS.extract({
      	fallback: "style-loader", // 编译后用什么loader来提取css文件
      	use: [
      		{loader:'css-loader'},
      		{loader:'less-loader'}
      	]
    })
},
复制代码

loader是由下往上解析，先处理less-loader，然后再css-loader

更多文档less-loader

src目录结构

src
├── css
│   └── style.less
├── images
│   └── avatar.png
├── js
│   └── app.js
└── template
    └── index.html

复制代码

执行打包 npm run webpack

浏览器访问dist/index.html

webpack4.x学习笔记五，js支持ES6；css支持less、浏览器兼容

css浏览器兼容

css3 目前有些语法需要添加浏览器前缀。

修改src/css/style.less文件

*{
	padding:0;
	margin:0;
}
body{
	background-color: #f5f5f5;
}
#app{
	width: 200px;
	height: 200px;
	div {
		width: 100px;
		height:100px;
		color:green;
		border:1px pink solid;
		transform: translate(100px,0);
	}
}
复制代码

安装插件 postcss-loader

执行命令

npm install --save-dev postcss-loader autoprefixer 
复制代码

修改 webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {
  mode:'development',
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename:'js/[name]-[hash].js'
  },
  module: {
		rules: [
					{
						test:/\.css$/,
						use: extractCSS.extract({
				          	fallback: "style-loader", // 编译后用什么loader来提取css文件
		          			use: [
		          				{loader:'css-loader'},
		          				{
									//浏览器添加前缀
						      		loader: 'postcss-loader',
							      	options: { 
							      		 ident: 'postcss',
							      		 plugins: [
								      		 require('autoprefixer')({
								      		 	broswers:['last 5 versions']
								      		 })
							      		 ]
							      	}
								}
		          			]
		        		})
					},
					{
						test:/\.less$/,
						use: extractCSS.extract({
				          	fallback: "style-loader", // 编译后用什么loader来提取css文件
		          			use: [
		          				{loader:'css-loader'},
		          				{
									//浏览器添加前缀
						      		loader: 'postcss-loader',
							      	options: { 
							      		 ident: 'postcss',
							      		 plugins: [
								      		 require('autoprefixer')({
								      		 	broswers:['last 5 versions']
								      		 })
							      		 ]
							      	}
								},
		          				{loader:'less-loader'}
		          			]
		        		})
					},
					{
						test:/\.js$/,  //添加正则，处理js文件
						use: [
								//把ES6语法转换为ES5
								{loader:'babel-loader',options:{"presets": ["@babel/preset-env"]}} 
							]
					}
				]
	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'./src/template/index.html',
			title:'this is webpack title'
		}),
		extractCSS
	]
};
复制代码

说明：

1.less解析需要注意顺序。 第一步less-loader，第二步 postcss-loader，第三步css-loader

2.autoprefixer 是 postcss-loader的其中一个插件

更多文档postcss-loader

执行打包 npm run webpack

浏览器访问dist/index.html

webpack4.x学习笔记五，js支持ES6；css支持less、浏览器兼容

总结

ES6支持

npm install --save-dev babel-loader @babel/core @babel/preset-env
复制代码
{
	test:/\.js$/,  //添加正则，处理js文件
	use: [
			//把ES6语法转换为ES5
			{loader:'babel-loader',options:{"presets": ["@babel/preset-env"]}} 
		]
}
复制代码

less支持

npm install --save-dev less less-loader
复制代码
{
	test:/\.less$/,
	use: extractCSS.extract({
      	fallback: "style-loader", // 编译后用什么loader来提取css文件
  		use: [
  			{loader:'css-loader'},
  			{loader:'less-loader'}
  		]
	})
},
复制代码

浏览器兼容

npm install --save-dev postcss-loader autoprefixer 
复制代码
{
	test:/\.less$/,
	use: extractCSS.extract({
      	fallback: "style-loader", // 编译后用什么loader来提取css文件
  		use: [
  			{loader:'css-loader'},
  			{
				//浏览器添加前缀
	      		loader: 'postcss-loader',
		      	options: { 
		      		 ident: 'postcss',
		      		 plugins: [
			      		 require('autoprefixer')({
			      		 	broswers:['last 5 versions']
			      		 })
		      		 ]
		      	}
			},
  			{loader:'less-loader'}
  		]
	})
},
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
图解网站分析（修订版）

图解网站分析（修订版）

[日] 小川卓 / 沈麟芸 / 人民邮电出版社 / 2014-10 / 69.00元

本书以图配文，结合实例详细讲解了如何利用从网站上获取的各种数据了解网站的运营状况，如何从数据中攫取最有用的信息，如何优化站点，创造更大的网站价值。本书适合各类网站运营人员阅读。 第1 部分介绍了进行网站分析必备的基础知识。第2 部分详细讲解了如何明确网站现状，发现并改善网站的问题。第3 部分是关于流量获取和网站内渠道优化的问题。第4 部分介绍了一些更加先进的网站分析方法，其中详细讲解了如何分......一起来看看 《图解网站分析（修订版）》 这本书的介绍吧!

码农工具
RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3