Webpack插件使用及热更新打包

举报
彭世瑜 发表于 2021/08/13 23:23:13 2021/08/13
【摘要】 1、HtmlWebpackPlugin 自动生成基本的 html 页面 2、开启文件监听 3、webpack-dev-server热更新 安装依赖 cnpm i html-webpack-plugin webpack-dev-server -D 1 配置文件 1、.babelrc { "presets": [ "@babel/preset-env", ] } 1...

1、HtmlWebpackPlugin 自动生成基本的 html 页面
2、开启文件监听
3、webpack-dev-server热更新

安装依赖

cnpm i html-webpack-plugin webpack-dev-server -D

  
 

配置文件
1、.babelrc

{ "presets": [ "@babel/preset-env", ]
}

  
 

2、package.json

{
  "name": "web-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "build": "webpack", "watch": "webpack --watch", "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.0", "babel-loader": "^8.1.0", "css-loader": "^3.4.2", "file-loader": "^6.0.0", "html-webpack-plugin": "^4.0.3", "less": "^3.11.1", "less-loader": "^5.0.0", "style-loader": "^1.1.3", "url-loader": "^4.0.0", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3"
  }
}

  
 

3、webpack.config.js

'use strict'
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack');

module.exports = { // 文件监听 watch: true, watchOptions: { //默认为空,设置不监听的文件或者文件夹,支持正则匹配 ignored: /node_modules/, //监听到变化发生后会等300ms再去执行,默认300ms aggregateTimeout: 300, //设置轮询文件是否变化时间,默认每秒问1000次 poll: 1000 }, // 打包入口 entry: { index: './src/index.js', }, // 指定输出地址及打包出来的文件名 output: { path: path.join(__dirname, 'dist'), filename: 'index.js' }, plugins: [ // 自动生成基本的 html 页面 new HtmlWebpackPlugin({ title: 'leaningwebpack', // 文件的标题 filename: 'webpack-index.html', // 文件名 favicon: 'src/demo.png' // 网页图标 }), // 热更新 new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: './dist', hot: true }, module: { rules: [ { test: /.js$/, use: 'babel-loader', // 忽略依赖包 exclude: /node_modules/ }, { test: /.css$/, // 执行的时候是先加载css-loader,将css解析好后再将css传递给style-loader use: [ 'style-loader', 'css-loader', ] }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(jpg|png|gif|jpeg)$/, use: [{ loader: 'url-loader', options: { // 如果图片大小小于这个值,就会被打包为base64格式 limit: 160000, name: 'imgs/[name].[hash].[ext]' } }] } ] }, // 开发环境 mode: 'production',
}

  
 

参考
Webpack 实战入门系列(二):插件使用及热更新打包

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/105178716

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。