webpack4-03-生成html、css3字首、babel配置等..

CSS Babel Webpack · 發表 2019-05-09 11:57:52

lesson-03
|- build
|- webpack-config.js// 配置檔案
|- dist// 生成打包結果
|- node-modules
|- public// 靜態資源
|- index.html// 模板檔案
|- package.json
|- package-lock.json
|- /src
|- assets
|- images
|- style
|- index.js
複製程式碼

建立html、清除dist目錄檔案

使用html-webpack-plugin 來建立html頁面，並自動引入打包生成的js 檔案
使用clean-webpack-plugin 清除出口目錄的檔案

安裝

npm i webpack-html-plugin clean-webpack-plugin -D
複製程式碼

配置檔案新增html-webpack-plugin

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// +
const CleanWebpackPlugin = require('clean-webpack-plugin') // +

const resolve = (dir) =>path.resolve(__dirname, dir)
module.exports = {
mode: 'development',
entry: resolve('../src/index.js'),
output: {
filename: 'bundle.js',
path: resolve('../dist')
},
module: {
rules: [
{
test: /\.(css|scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
}
]
},
plugins: [// +
new CleanWebpackPlugin(),// +
new HtmlWebpackPlugin({// +
title: 'Lesson-03',// +
template: resolve('../public/index.html') // +
})// +
]// +
} 
複製程式碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="box"></div>
</body>
</html>
複製程式碼

執行webpack

npm run dev


> [email protected] dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-03
> npx webpack --config ./build/webpack.config.js

Hash: fed721cbb72ce9b765de
Version: webpack 4.30.0
Time: 2379ms
Built at: 2019-05-04 09:22:31
AssetSizeChunksChunk Names
F.png416 bytes[emitted]
 bundle.js28.5 KiBmain[emitted]main
index.html205 bytes[emitted]
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js?!./src/assets/style/index.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/assets/style/index.scss 334 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js?!./src/assets/style/style.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/assets/style/style.css 458 bytes {main} [built]
[./src/assets/images/F.png] 51 bytes {main} [built]
[./src/assets/style/index.scss] 1.25 KiB {main} [built]
[./src/assets/style/style.css] 1.25 KiB {main} [built]
[./src/index.js] 259 bytes {main} [built]
+ 4 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 426 bytes {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 878 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {0} [built]
+ 1 hidden module
複製程式碼

執行成功後，會在dist資料夾內生成index.html

配置自動新增css3字首

安裝

npm i postcss-loader autoprefixer -D
複製程式碼

修改 webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')// +

const resolve = (dir) =>path.resolve(__dirname, dir)
module.exports = {
mode: 'development',
entry: resolve('../src/index.js'),
output: {
filename: 'bundle.js',
path: resolve('../dist')
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.(css|scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {// +
importLoaders: 1// +
}// +
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Lesson-03',
template: resolve('../public/index.html')
})
]
} 
複製程式碼

在根目錄新增postcss.config.js

module.exports = {
plugins: {
autoprefixer: {}
}
}
複製程式碼

修改index.scss

body {
display: flex;
justify-content: center;
align-items: center;
#box {
background-color: yellow;
background-repeat: no-repeat;
transform: translateX(50px);
}
}
複製程式碼

執行webpack

npm run dev
複製程式碼

再開啟dist/index.html檔案時，發現只有transform 添加了字首,

-webkit-transform: translateX(50px);
transform: translateX(50px);
複製程式碼

而display: flex... 並沒有新增字首

display: flex;
justify-content: center;
align-items: center;
複製程式碼

上面的問題，主要原因是需要配置指定瀏覽器的範圍內新增CSS字首才能給display: flex 等，新增字首。

現在有四種配置方法可以解決上面的問題。

方法一

直接在webpack.config.js 中配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')

const resolve = (dir) =>path.resolve(__dirname, dir)
module.exports = {
mode: 'development',
entry: resolve('../src/index.js'),
output: {
filename: 'bundle.js',
path: resolve('../dist')
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.(css|scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader',
options: {// +
plugins: [// +
autoprefixer({// +
browsers: [// +
"> 1%",// +
"last 2 version",// +
"not ie <= 8"// +
]// +
})// +
]// +
}// +
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Lesson-03',
template: resolve('../public/index.html')
})
]
} 
複製程式碼

方法二

在postcss.config.js 中配置

module.exports = {
plugins: {
autoprefixer: {
browsers: ['> 1%', 'last 2 version', 'not ie <= 8']// +
}
}
}
複製程式碼

方法三

在package.json 中配置

{
"name": "lesson-03",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack --config ./build/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
...
},
"browserslist": [// +
"> 1%",// +
"last 2 version",// +
"not ie <= 8"// +
]// +
}
複製程式碼

方法四（教程最終選擇了此方法）

在跟目錄新增.browserslistrc 配置檔案。

.browserslistrc 內容如下：

> 1%
last 2 versions
not ie <= 8
複製程式碼

目錄如下：

lesson-03
|- /build
|- /dist// 生成打包結果
|- /node-modules
|- /public// 靜態資源
|- package.json
|- package-lock.json
|- /src
|- .browserslistrc// +
|- .gitignore
|- package.json
|- postcss.config.js
|- README.md
複製程式碼

四種辦法不能同時出現，否則會報錯，配置其中一種即可。

執行

npm run dev
複製程式碼

再開啟dist/index.html, 在控制檯檢視樣式:

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
複製程式碼

可發現已經成功添加了廠商的字首，還添加了display:flex低版本瀏覽器的舊版flex樣式。最終得到我們想要的效果了！！！！

配置babel,ES6/7/8轉 ES5 語法

安裝

npm install babel-loader @babel/core @babel/preset-env -D
複製程式碼

修改webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')

const resolve = (dir) =>path.resolve(__dirname, dir)
module.exports = {
mode: 'development',
entry: resolve('../src/index.js'),
output: {
filename: 'bundle.js',
path: resolve('../dist')
},
module: {
rules: [
{// +
test: /\.jsx?$/,// +
loader: 'babel-loader'// +
},// +
{
test: /\.(css|scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Lesson-03',
template: resolve('../public/index.html')
})
]
} 
複製程式碼

根目錄新增babel.config.js 檔案

module.exports = {
presets: [
'@babel/preset-env'
]
}
複製程式碼

執行webpack

npm run dev
複製程式碼

可以看到 ES6語法被轉成了ES5語法了。

到這裡其實還沒有完成，只是轉了語法，並沒有把api轉成ES5。

ES6/7/8 Api 轉ES5

@babel/core、@babel/preset-env 只會將 ES6/7/8語法轉換為ES5語法，但是對新api並不會轉換。

我們可以通過babel-polyfill 對一些不支援新語法的客戶端提供新語法的實現。

安裝

npm install @babel/polyfill -D
複製程式碼

修改webpack.config.js 配置
在entry 中新增@babel-polyfill

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')

const resolve = (dir) =>path.resolve(__dirname, dir)
module.exports = {
mode: 'development',
entry: {
app: ['@babel/polyfill', resolve('../src/index.js')]// +
},
output: {
filename: 'bundle.js',
path: resolve('../dist')
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.(css|scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Lesson-03',
template: resolve('../public/index.html')
})
]
} 
複製程式碼

最後執行webpack

npm run dev
複製程式碼

即可檢視程式碼已成功轉換ES語法、Api!!!

webpack4-03-生成html、css3字首、babel配置等..

建立html、清除dist目錄檔案

配置自動新增css3字首

方法一

方法二

方法三

方法四 （教程最終選擇了此方法）

配置babel,ES6/7/8轉 ES5 語法

ES6/7/8 Api 轉ES5

您可能也會喜歡…

方法四（教程最終選擇了此方法）