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