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

快乐源泉
1,494 阅读2分钟

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实战六，处理图片

avatar
文章
阅读
粉丝

友情链接：