webpack4.x实战五，js支持ES6；css支持less、浏览器兼容

最新推荐文章于 2022-05-27 09:30:25 发布
最新推荐文章于 2022-05-27 09:30:25 发布
阅读量619 收藏
点赞数
文章标签： webpack javascript ViewUI
原文链接：https://juejin.im/post/5cd6fd7951882568d06293f3
版权

ECMAScript 6.0, 是JaveScript的下一个版本标准, 2015.06发版。

js支持ES6

安装插件 babel-loader

执行命令

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

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

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

总结

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

思考：如何打包图片呢

请看webpack4.x实战六，处理图片

weixin_34007906
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack配置--css和js兼容不同浏览器
Heartbroken_man的博客
08-30 735
首先我们在index.js这个入口文件里面内容如下 和另外两个引入的api文件和scss文件如下： 可以看到是有兼容性的js和css 我的loader配置如下 需要安装babel-loader、@babel/preset-env、mini-css-extract-plugin、css-loader、sass-loader module: { rules: [ // babel-polyfill已经被移除了 { ..
推荐项目：Webpack 4、ES6 和 React 的集成实践
最新发布
gitblog_00063的博客
04-08 281
推荐项目：Webpack 4、ES6 和 React 的集成实践 项目地址:https://gitcode.com/NewPrototype/webpack4-es6-react 项目简介 在GitCode上，我们可以找到一个名为 "NewPrototype/webpack4-es6-react" 的开源项目，它是一个集成了Webpack 4、ES6语法和React框架的前端开...
js压缩代码后怎么生成source map_为什么 webpack4 默认支持 ES6 语法的压缩？
weixin_39723010的博客
11-25 155
在专栏课程里，有位同学提到过一个很有意思的问题：“我没装 babel，js 入口里写了个箭头函数，运行 webpack 构建命令后，也成功编译了。这是为什么？”。今天就带领大家一起去探讨下这个话题。在使用 webpack 的时候，很常见的一个构建优化手段就是缩小构建目标。比如在构建阶段只构建 src 里面的模块代码，对于 node_modules 里面所引入的三方包不进行构建操作。发现问题如果使用...
webpack4与babel配合使es6代码可运行于低版本浏览器
weixin_30904593的博客
10-11 208
使用es6+新语法编写代码，可是不能运行于低版本浏览器，需要将语法转换成es5的。那就借助babel7转换，再加上webpack打包，实现代码的转换。 转换包括两部分：语法和API let、const这些是新语法。 new promise()等这些是新API。 简单代码 类库 utils.js const name = 'weiqinl' let year = new Date().getFul...
webpack使用babel处理ES6语言兼容浏览器
qq_34455363的博客
05-09 746
1.安装 搭babel桥梁–：cnpm install --save-dev babel-loader @babel/core 使用babal处理es6：cnpm install @babel/preset-env --save-dev 2.配置文件中模块loader中添加规则 { test: /\.js$/, exclude: /node_modules/,//排除node里面的...
Vue 教程(二十九)webpack 使用 less 文件
yuan_xw的专栏
08-09 1073
Vue 教程(二十九)webpack 使用 less 文件 什么是 Less Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 webpack 处理.less 文件 编写.less 文件 @charset "UTF-8"; @fontSize: 30px; @fontColor: white; body { font-size: @fontSize; color
Webpack-4-boilerplate:带有ES6 +和SASS，LESSSTYLUS支持+开发服务器和livereload的Webpack 4
05-14
带内置选项的Webpack 4 Boilerplate ES6 / Sass可以更改预处理器（较少/手写笔） 此Webpack 4 Boilerplate带有2个版本： npm run build:dev ->使用livereload，sourcemap在localhost:8080上启动开发服务器 npm ...
boilerplate-webpack-react-es6-cssModule:Webpack-React-ES6-CssModule项目的样板
05-19
使用 webpack v3、react v16、react-router v4，相较旧模板有较大的变化。 webpack 的具体使用及优化可参考我的博文 。 主要依赖及工具 功能 主要功能 Hot Module Replacement 热加载 ESLint 检测 less、...
webpack4的迁移的使用方法
08-27
Webpack 2.x 默认支持 ES6 模块，不再需要将它们转换为 CommonJS 模块。在 `.babelrc` 中可以设置 `"modules": false` 来避免转换 `import` 和 `export`。 - **插件升级**： 遇到插件报错，通常需要单独升级对应...
es6的webpack自定义项目
06-06
前端，webpack打包项目，es6语法，webapck,图片压缩，js压缩，less，css压缩，本地运行
react-cnode：基于webpack + react + react-router + redux + less + flex.css + ES6的React版本cnode社区
02-04
基于webpack + react + react-router + redux +更少+ flex.css + ES6的React版cnode社区 演示 下载 git clone https://github.com/lzxb/react-cnode.git cd react-cnode npm install (安装依赖模块) npm install...
webpack配置es6+less开发环境
11-17
此为本人制作的webpack开发环境，使用babel进行代码转换，postcss进行兼容性，可以使用less进行css预编译，欢迎测试
es6 + webpack热更新
01-07
主要是 用于 webpack + es6 + react 实现webpack 的热更新服务，webpack转es6，并没有react 其他代码，
webpack对css进行各大平台浏览器的兼容性处理
weixin_42125732的博客
06-01 6781
我们在开发配置环境时，总是能需要css兼容浏览器，才能显示效果 这里记录一下webpack对css的兼容性处理（使用的是postcss） 1.首先先创建好对应的目录，以及文件 2.下载对应的loader npm i postcss-loader postcss-preset-env -D 3.重点：兼容css的写法 module:{ rules:[ { test:/\.css$/, use:[
webpack@4以上babel兼容es6语法编译
llp5210的博客
12-01 302
package.json文件中babel的版本 “@babel/core”: “^7.4.5”, “@babel/plugin-proposal-class-properties”: “^7.4.4”, “@babel/plugin-transform-runtime”: “^7.4.4”, “@babel/preset-env”: “^7.4.5”, “@babel/runtime”: “...
react18中配置webpack，支持less以及less模块化(补充篇)
tuzi007a的博客
05-27 3129
本篇的目的是： 通过修改配置，让react支持.less文件的模块化 之前写过一篇在react里配置less-loader和css-modules， 该配置对react18也是有效的。 本篇是对上一篇的补充。 上一篇中，css和less要做模块化， 样式文件名必须写成xx.module.css或者xx.module.less的形式。 这在实际开发中，仍然不够友好，毕竟样式文件名中要一直加上.module这个后缀。 本篇中就来解决这个问题。 在webpack.config.js配置文件中找到这样的代码： /
hadoop运行模式（一）
qq_24186017的博客
01-30 436
一.Hadoop的组成：   1）HDFS 分布式文件系统   2）MapReduce 分布式的离线并行计算框架   3）Hadoop YARN:作业调度与集群资源管理的框架   4）支持其他模块的工具模块    二：Hadoop运行环境的搭建：完成以下8步即可 1.虚拟机网络模式设置为NAT 2.克隆虚拟机 3.修改为静态ip [root@hadoop101 /]
webpack--css：自动处理CSS3属性前缀(十)
weixin_33995481的博客
11-07 251
目录结构 before after 文件内容 index.css body{ background-color: red; color: white; } #image{ width: 28px; height: 28px; background-image: url(../images/aaa...
webpack--处理css的兼容性
weixin_44705310的博客
02-09 813
前言：因为css3样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对css3属性进行统一的处理。 实现方式 //webpack.config.js rules：[ { test: /\.less/, use: [ // 'style-loader', // 将css文件转换成commonjs的模块
11.Webpack面试真题-59页.pdf
02-28
Webpack 不仅处理JavaScript，还能整合CSS、Less、SCSS等样式语言，通过插件（如`MiniCssExtractPlugin`）提取CSS并将其合并到bundle中，或者采用Source Maps实现代码与样式的关联。 关于Webpack的面试问题可能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值