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

2024-10-03 15:28:04

前言：

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

创建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文件生效

对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中

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

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

热更新，自动刷新

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

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

webpack4 入门最简单的例子介绍

webpack在目前来说应该是前端用的比较多的打包工具了,那么对于之前没有接触过这块的该怎么办呢?答案很明显嘛,看资料,查文档,自己去琢磨,自己去敲一敲,跑一跑: Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载. webpack和Grunt以及Gulp相比有什么特性 Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的
webpack4简单入门实例

毋庸置疑,webpack现在已经成为前端很多的打包器.网上关于webpack的相关文章也是很多的,关于webpack的具体配置,官网上也是讲解的很清楚,本文主要是根据自己的学习,进行简单的webpack实例的讲解,供初学者进行入门实战.文中的实例是基于webpack4的,所以请小伙伴们一定要注意自己本地的环境,不要因为环境问题而浪费不必要的时间.文章中如有错误的地方,欢迎大家指正. 我的实例是循序渐进的,我们先从最简单的开始新建一个demo文件夹,然后再将命令行切换到当前目录下,执行如下命令
浅谈webpack4.x 入门(一篇足矣)

前言: webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等. 安装 //全局安装 npm install -g webpack webpack-cli 创建文件夹初始化 //创建文件夹 mkdir webpack4demo //进入 cd webpack4demo //初始化 npm in
浅谈spring security入门

一介绍本节给知识追寻者给大家带来的是springSecurity入门篇,主要是简述下springSecrurity的启动原理和简单的入门搭建: 二核心模块介绍 spring-security-core : 包含核心身份验证和access-contol类和接口,远程支持和基本配置AP: spring-security-web: web , url登陆验证和访问控制: spring-security-config: 支持xml 或者java注解配置: 当然其模块远不止这些,比如CAS,ALC,
浅谈Webpack4 plugins 实现原理

目录前言认识实践出真知前言在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听这些事件并通过 webpack Api 对输出文件做对应的处理, 如 hmlt-webpack-plugin 就是对模板魔剑 index.html 进行拷贝到 dist 目录的认识先来通过源码来认识一下 plugins 的基本结构 https://github.com/webpack/webpack/blo
浅谈js promise看这篇足够了

一.背景大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着.但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入"回调监狱",就容易造成下边的例子: async(1, function(value){ async(value, function(value){ async(value, fu
浅谈webpack4 图片处理汇总

本次课程的代码目录(如下图所示): >>> 本节课源码 >>> 所有课程源码本节课会讲述 webpack4 中的图片常用的基础操作: 图片处理和 Base64编码图片压缩合成雪碧图 1. 准备工作如项目代码目录展示的那样,除了常见的 app.js 作为入口文件,我们将用到的 3 张图片放在 /src/assets/img/ 目录下,并在样式文件 base.css 中引用这些图片. 剩下的内容交给 webpack 打包处理即可.样式文件和入口 js 文件的代码分
浅谈Webpack4 Tree Shaking 终极优化指南

几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到
浅谈正则表达式实例入门

很长时间没看正则表达式了,碰巧今天用到,温故知新了一把看书学习吧 50% 的举一反三练习中的原创. 一 javascript正则表达式的基本知识 1 javascript 正则对象创建和用法声明javascript 正则表达式复制代码代码如下: var reCat = new RegExp("cat"); 你也可以 var reCat = /cat/; //Perl 风格 (推荐) 2 学习最常用的 test exec match search replace split
浅谈Android开发系列网络篇之Retrofit

Retrofit是一个不错的网络请求库,用官方自己的介绍就是: A type-safe REST client for Android and Java 看官网的介绍用起来很省事,不过如果不了解它是怎么实现的也不太敢用,不然出问题了就不知道怎么办了.这几天比较闲就下下来看了一下,了解一下大概实现方法,细节就不追究了.先来看一个官网的例子,详细说明去网官看简单示例首先定义请求接口,即程序中都需要什么请求操作 public interface GitHubService { @GET("/use
浅谈Python NLP入门教程

正文本文简要介绍Python自然语言处理(NLP),使用Python的NLTK库.NLTK是Python的自然语言处理工具包,在NLP领域中,最常使用的一个Python库. 什么是NLP? 简单来说,自然语言处理(NLP)就是开发能够理解人类语言的应用程序或服务. 这里讨论一些自然语言处理(NLP)的实际应用例子,如语音识别.语音翻译.理解完整的句子.理解匹配词的同义词,以及生成语法正确完整句子和段落. 这并不是NLP能做的所有事情. NLP实现搜索引擎: 比如谷歌,Yahoo等.谷歌搜索引
浅谈Node 调试工具入门教程

JavaScript 程序越来越复杂,调试工具的重要性日益凸显.客户端脚本有浏览器,Node 脚本怎么调试呢? 2016年,Node 决定将 Chrome 浏览器的"开发者工具"作为官方的调试工具,使得 Node 脚本也可以使用图形界面调试,这大大方便了开发者. 本文介绍如何使用 Node 脚本的调试工具. 一.示例程序为了方便讲解,下面是一个示例脚本.首先,新建一个工作目录,并进入该目录. $ mkdir debug-demo $ cd debug-demo 然后,生成 packa

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

相关推荐

随机推荐