浅谈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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
js保留两位小数方法总结
Jan 31 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
JavaScript实现动态生成表格
Aug 02 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 全角转半角实现代码
2010/05/16 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
php 操作调试的方法
2012/07/12 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php生成图片缩略图的方法
2015/04/07 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
详解Python self 参数
2019/08/30 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
公开承诺书格式
2014/05/21 职场文书
2014年度思想工作总结
2014/11/27 职场文书
挂职个人工作总结
2015/03/05 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
sql server 累计求和实现代码
2022/02/28 SQL Server