webpack4-03-生成html、css3前缀、babel配置等..

栏目: CSS · 发布时间: 5年前

内容简介：运行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目录文件

  1. 使用 html-webpack-plugin 来创建html页面，并自动引入打包生成的 js 文件
  2. 使用 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 !!!


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Fluent Python

Fluent Python

Luciano Ramalho / O'Reilly Media / 2015-8-20 / USD 39.99

Learn how to write idiomatic, effective Python code by leveraging its best features. Python's simplicity quickly lets you become productive with it, but this often means you aren’t using everything th......一起来看看 《Fluent Python》 这本书的介绍吧!

码农工具
随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3