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

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

内容简介：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'}
  		]
	})
},
复制代码

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

查看所有标签

猜你喜欢:

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

码农书籍
互联网运营实战手册

互联网运营实战手册

李春雷 / 人民邮电出版社 / 2017-4 / 49.80元

为什么网络推广做不起来？微信文章也是套路？标题党的背后是什么？把服务器搞瘫痪的活动是怎么玩出来的？社群究竟要如何运营？数据又该如何运营？你会任务分解吗？ 《互联网运营实战手册》详细剖析了网站（产品）的运营技巧与实战，涵盖实用的互联网运营方法，是作者从多年的实战中提炼出的运营心得和精华，涉及运营技巧、运营工具和运营思维方法。详细讲解了用户运营、内容运营、新媒体运营、社群运营、活动运营和数据运营......一起来看看 《互联网运营实战手册》 这本书的介绍吧!

码农工具
JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

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

正则表达式在线测试

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