webpack4.x學習筆記五，js支援ES6；css支援less、瀏覽器相容

快樂源泉發表於2019-05-13
Web筆記JSCSS瀏覽器

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

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' }
        ]
    })
}
複製程式碼

相關文章