内容简介：运行webpack运行成功后，会在dist文件夹内生成index.html在根目录新增
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
> lesson-02@1.0.0 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
Asset Size Chunks Chunk Names
F.png 416 bytes [emitted]
bundle.js 28.5 KiB main [emitted] main
index.html 205 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 !!!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
《Unity3D网络游戏实战（第2版）》
罗培羽 / 机械工业出版社 / 2019-1-1 / 89.00元
详解Socket编程，搭建稳健的网络框架；解决网游中常见的卡顿、频繁掉线等问题；探求适宜的实时同步算法。完整的多人对战游戏案例，揭秘登录注册、游戏大厅、战斗系统等模块的实现细节。 想要制作当今热门的网络游戏，特别是开发手机网络游戏，或者想要到游戏公司求职，都需要深入了解网络游戏的开发技术。本书分为三大部分，揭示网络游戏开发的细节。 第一部分“扎基础”（1-5章） 介绍TCP网络游......一起来看看 《《Unity3D网络游戏实战（第2版）》》 这本书的介绍吧!
