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

最新推荐文章于 2023-01-28 16:31:21 发布
最新推荐文章于 2023-01-28 16:31:21 发布
阅读量311 收藏
点赞数
文章标签： webpack json ViewUI
原文链接：https://juejin.im/post/5cd3a317e51d453ae37293f4
版权

目录结构

  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 !!!

项目地址

源码地址点击这GitHub

weixin_33991727
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack5 踩坑之（html-webpack-plugin）
vv_bug
02-18 1万+
2021 开工第一天就给我个大大的惊喜。 ERROR in Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html. - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult [vu
从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)
彼岸舞的博客
06-07 562
webpack提供了一个可选的本地开发服务器,这个本地服务器是基于Nodejs搭建的,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改代码后的结果 不过他是一个单独的模块,在webpack中使用需要安装 npm install --save-dev webpack-dev-server@2.9.3 devserver也是作为webpack中的...
原生Webpack的html-webpack-plugin配置js,css
Meta.Qing的博客
09-08 1418
原生webpack如何从外部引入js和css呢?webpack.config.js 配置。index.html代码。
electron-vue报错ERROR in Template execution failed: ReferenceError: process is not defined
youyudexiaowangzi的专栏
09-10 1241
npm run dev报错 ERROR in Template execution failed: ReferenceError: process is not defined ERROR in ReferenceError: process is not defined - index.ejs:11 eval [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2 - index.ejs:1...
html中加入js前缀,关于javascript:给css添加前缀jswebpack
weixin_34588509的博客
06-05 466
给css增加前缀(js，webpack)对于更多日常应用的公共类的操作方法，能够关注下小滑轮网站代码中某些中央增加。在我的项目中，有时须要在某个状况下须要增加css前缀，这个工夫个别会用js给css增加。上面提供一个通用办法，用来增加前缀。/*** @desc 对css属性针对不同浏览器加公有前缀* @desc 先计算下以后浏览器反对那个前缀，反对哪个，就减少那个前缀。并不是把所有的前缀。* st...
webpack-boilerplate：带Babel，SASS，PostCSS，Vue，Tailwind和Pug的Webpack 4模板
01-30
生成转译，捆绑，自动前缀，缩小和压缩的文件以进行production 支持.env文件中的环境变量 使用删除未使用CSS 用法 用src/js编写所有ES2015 + Javascript代码，并用src/style编写SCSS样式。 将静态文件存储在public ...
jekyll-mix：带有Webpack，Babel，Sass，postCSS等的Jekyll Boilerplate。
01-31
杰基尔混合带有Laravel混合的Jekyll样板产品特点ES2017 +模块编译（Webpack + Babel） 浏览器同步萨斯PostCSS自动前缀Dev中的源地图缩小生产生产中的版本控制包含媒体（ ）要求节点杰基尔npm或Yarn shipit（ ）安装...
webpack4-boilerplate:webpack4打包模板
05-17
webpack4-boilerplate webpack4 多页面打包模板 支持React 支持scss, autoprefixer自动加浏览器前缀, icon字体图标 ES6+语法 babel编译成 ES5语法 提取公共css和js，自动添加版本号 打包压缩js和css Mock数据 接口...
webpack5-boilerplate:带有DevServer，SCSS，autoprefixer，babel和ESLint的灵活Webpack 5样板
05-07
内容SCSS Postcss /自动前缀巴别塔ESLint安装git clone https://github.com/romanjsprodev/webpack5-boilerplate.gitcd webpack5-boilerplatenpm i --legacy-peer-deps发展npm run start生产npm run build执照在您的...
js-library-boilerplate：Javascript入门模板-Webpack 4，Babel 7，UMD，热重载等
01-29
CSS自动前缀 SASS / SCSS支持 UMD导出，因此您的库可在任何地方使用。 基于 （适用于Vanilla JS库或React库） 开玩笑的单元测试 npm run demo一个准备部署的演示 用于构建的可定制文件头 可配置的postinstall...
html文件中引入＜link/＞标签,webpack打包报错：document is not defined
qq_45327886的博客
03-16 2026
document is not defined html中引入link,打包
盘点用vue-cli、element-ui做项目过程中所遇到的坑
qq_36151930的博客
04-30 1308
1.使用el-cascader级联器出现下拉列表过长的问题 下拉列表太长，无法显示全局以及输入框的内容，大致是这样的，如下图： 解决办法：在全局样式表中插入的下面两种样式中的一种即可 /*第一种*/ .el-scrollbar__wrap{ height: 200px ; } /*第二种*/ .el-cascader-menu { height: 200px; } ...
安装html-webpack-plugin插件，避免每次在项目里面每次手动新建index.html
weixin_48462578的博客
03-23 157
安装html-webpack-plugin插件，避免每次手动新建index.html-----webpack cmd命令安装 cnpm install html-webpack-plugin -D
Webpack 项目中 html-webpack-plugin 和 public 目录的关系
梅花寺
01-28 957
为什么需要？比如生产环境的打包js文件其实是动态文件名，像这种情况不能够写死，因此就需要去帮忙配置最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
webpack源码解析二（html-webpack-plugin插件）
vv_bug
12-17 6702
我们接着上一节从源码研究一下html-webpack-plugin插件，感兴趣的童鞋可以看一下我上一篇文章 webpack源码解析一 文章开始先上一下源码：html-webpack-plugin源码地址，不废话，我们开车咯～～ 首先安装： yarn add html-webpack-plugin 配置webpack.config.js： plugins: [ new HtmlPlugin(...
webpack的配置
qq_45675879的博客
03-15 155
1、webpack https://www.webpackjs.com/ webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 核心点： 入口 输出 loader 插件 webpack的配置 webpack 4 是免配但是可配 webpack 3 创建配置文件 // webpack.config.js module.exports = {...
接上一篇：webpack中html-webpack-plugin的使用及配置生成html
u010234868的专栏
09-20 281
1. 安装html-webpack-plugin： cnpm i html-webpack-plugin@2.24.1 -D 2. webpack.dev.config.js中配置： var path = require('path'); // 引入html-webpack-plugin const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { "main":
vue.js html loader,如何在vuejs中使用htmlhint-loader
weixin_39564807的博客
06-15 281
我正在尝试使用我的vuejs应用程序设置html linting，但我不确定如何使用我的webpack配置正确配置 . 我目前正在尝试使用htmlhint-loader . 我使用这个命令安装它：npm install htmlhint-loader --save并在我的 webpack.base.config 中添加了以下代码：module: {preLoaders: [{test: /\.vu...
webpack babel-loader配置
最新发布
08-20
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev ``` 2. 在项目根目录下创建一个 `webpack.config.js` 文件，并添加以下内容： ```javascript module.exports = { entry:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值