浅谈webpack4.x 入门(一篇足矣)


Posted in Javascript onSeptember 05, 2018

前言:

webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等。

安装

//全局安装 
npm install -g webpack webpack-cli

创建文件夹初始化

//创建文件夹
mkdir webpack4demo
//进入
cd webpack4demo
//初始化
npm init -y

创建文件夹scripts 里面创建index.js文件

index.js

const s=()=>{ 
console.log('s init')
}
s()

创建webpack.config.js文件

webpack.config.js

const path = require("path");
module.exports = {
 entry: {
 index: "./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js文件
 },
 output: {
 filename: "[name].bundle.js",//输出文件名,[name]表示入口文件js名
 path: path.join(__dirname, "dist")//输出文件路径
 }
}

执行webpack --mode development将会生成dist/index.bundle.js

浅谈webpack4.x 入门(一篇足矣)

创建index.html,并引入js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>$Title$</title>
</head>
<body>
$END$
</body>
<script src="./dist/index.bundle.js"></script>
</html>

打开浏览器将会看到之前设置的js文件生效

浅谈webpack4.x 入门(一篇足矣)

对css,js进行编译打包合并生成md5

创建a.js,c.js,a.css,更改index.js

a.js

import acss from './a.css'
import c from './c.js'
const a={
 init(){
 console.log("a init bbbaaa")
 },
 cinit(){
 c.init()
 }
}
export default a;

c.js

const c={
 init(){
 console.log("ccccc")
 }
}
export default c;

a.css

body{ 
 background-color: #6b0392;
}

index.js

import a from './a.js'
import c from './c.js'
const s=()=>{
 a.init()
 a.cinit()
 c.init()
 console.log('s init')
}
s()

配置webpack.config.js文件

const path = require("path");
module.exports = {
 entry: {
 index: "./scripts/index.js"
 },
 output: {
 filename: "[name].bundle.[hash].js",//[hash]会在后面生成随机hash值
 path: path.join(__dirname, "dist")
 },
 module: { // 处理对应模块
 rules: [
  {
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]//处理css
  }
 ]
 },
}

安装style-loader, css-loader

npm install style-loader css-loader --save-dev

执行webpack --mode development将会看到一个带md5值得js文件,将他引入html中

 浅谈webpack4.x 入门(一篇足矣)

CSS中的图片处理

安装url-loader, file-loader

npm install url-loader file-loader --save-dev

修改a.css 将一张图片放到scripts目录

body{
 background-image: url("./timg.jpg");
 background-color: #a748ca;
}

配置webpack.config.js文件

module: {
 rules: [
 {
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
 },
 {
  test:/\.(png|jpg|gif)$/,
  use:[{
  loader:'url-loader',
  options:{
   outputPath:'images/',//输出到images文件夹
   limit:500 //是把小于500B的文件打成Base64的格式,写入JS
  }
  }]
 }
 ]
},

执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片,打开index.html

 浅谈webpack4.x 入门(一篇足矣)

js自动注入html文件

使用插件html-webpack-plugin,可以将生成的js自动引入html页面,不用手动添加

//安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安装webpack webpack-cli
npm install webpack webpack-cli --save-dev

配置webpack.config.js文件

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
module.exports = {
 entry: {
 index: "./scripts/index.js"
 },
 output: {
 filename: "[name].bundle.[hash].js",
 path: path.join(__dirname, "dist")
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
  }
 ]
 },
 plugins: [// 对应的插件
 new HtmlWebpackPlugin({ //配置
  filename: 'index.html',//输出文件名
  template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
 }),
 ]
}

执行webpack --mode development 记得要讲之前手动引入的script删除,便可以看到dist那里自动生成一个index.html,打开便可以看到。

删除指定文件

使用插件clean-webpack-plugin,删除指定文件,更多配置,查看clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

配置webpack.config.js文件

const CleanWebpackPlugin = require('clean-webpack-plugin');//引入 
plugins: [// 对应的插件
 new HtmlWebpackPlugin({ //配置
  filename: 'index.html',//输出文件名
  template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
 }),
 new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
 ]

执行webpack --mode development,可以看到dist目录被删除,又生成一个新的dist,之前的js文件已经被删除。

提取公共文件

我们可看到a.js和index.js都引入了c.js文件,为什么要提取公共代码,简单来说,就是减少代码冗余,提高加载速度。和之前的webpack配置不一样:

//之前配置
// new webpack.optimize.SplitChunksPlugin({
// name: 'common', // 如果还要提取公共代码,在新建一个实例
// minChunks: 2, //重复两次之后就提取出来
// chunks: ['index', 'a'] // 指定提取范围
// }),
//现在配置
optimization: {
 splitChunks: {
 cacheGroups: {
  commons: { // 抽离自己写的公共代码
  chunks: "initial",
  name: "common", // 打包后的文件名,任意命名
  minChunks: 2,//最小引用2次
  minSize: 0 // 只要超出0字节就生成一个新包
  },
  vendor: { // 抽离第三方插件
  test: /node_modules/, // 指定是node_modules下的第三方包
  chunks: 'initial',
  name: 'vendor', // 打包后的文件名,任意命名
  // 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包
  priority: 10
  },
 }
 }
},

下载jq npm install jquery --save 在a.js,index.js引用 import $ from 'jquery' 输出$

生成3个js文件,执行webpack --mode development

浅谈webpack4.x 入门(一篇足矣) 

浅谈webpack4.x 入门(一篇足矣)

热更新,自动刷新

我们将用到webpack-dev-serve,webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器,它有强大的自动刷新和热替换功能。

安装webpack-dev-serve

npm install webpack-dev-serve --save-dev

配置webpack.config.js文件

const webpack = require("webpack");
plugins: [
 new HtmlWebpackPlugin({
 filename: 'index.html',
 template: './index.html',
 }),
 new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
 // 热更新,热更新不是刷新
 new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此静态文件服务器,可以用来预览打包后项目
 inline:true,//打包后加入一个websocket客户端
 hot:true,//热加载
 contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
 host: 'localhost',//主机地址
 port: 9090,//端口号
 compress: true//开发服务器是否启动gzip等压缩
},

配置package.json

"scripts": {
 "dev": "webpack-dev-server --mode development"
},

执行npm run dev 访问 http://localhost:9090/ 

浅谈webpack4.x 入门(一篇足矣)

浅谈webpack4.x 入门(一篇足矣)

随便修改任一文件便会自动刷新网站显示修改相应内容。

总结:

webpack4还有很多很多配置,例如css的拆分呀,less sass配置呀,js编译es6呀,多入口配置呀,生产环境配置,js没有使用的模块自动检测剥离等等,只能等下次有空在总结,感谢大家的观看,新手入坑,欢迎指出错误的地方。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SinaEditor使用方法详解
Dec 28 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
javascript回到顶部特效
Jul 30 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
js实现星星打分效果
Jul 05 Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
You might like
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
长青弘远的面试题
2012/06/09 面试题
宠物店的创业计划书范文
2014/01/11 职场文书
高中军训广播稿
2014/01/14 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
反对邪教标语
2014/06/30 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
反邪教学习心得体会
2016/01/15 职场文书
倡议书怎么写?
2019/04/11 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js