一.初识Webpack-安装与配置

二.基于webpack的小案例

三.解决一些使用webpack的问题

四.webpack-dev-server

五.html-webpack-plugin

六.devServer

七.@标识符导入模块

一.初识Webpack-安装与配置

Webpack是前端工程化的一个具体解决方案

提供了友好的前端模块化开发支持、代码压缩混淆、解决浏览器对于JavaScript低级高级语言兼容性的处理，优化性能等等，极大的提高了开发的效率与项目可维护性

我们所熟知的VUE、React、Angular等前端项目基本都是基于Webpack进行工程化开发的

我们首先需要在项目中安装Webpack：

npm i webpack webpack-cli -D

这里看到我们需要安装俩个包，webpack-cli是webpack的执行依赖，如果没有webpack-cli的话，webpack不能运行；D指的是开发时需要，webpack以及webpack-cli会被记载到package.json配置文件中的devDependencies节点中，项目上线后是不需要webpack工具参与的

安装好之后，我们需要配置webpack

我们需要在项目根目录中新建一个webpack.config.js配置文件并初始化该配置文件：

module.exports = {mode:'development'
}

意思是告诉webpack当前的模式是处于项目开发阶段的，不需要进行上线的操作

上线时我们可以将webpack配置文件的mode值改为production（告诉webpack当前项目处于上线阶段），这样的话，webpack就会将我们的文件进行真正的压缩混淆等等操作

这还没有配置完，我们还需要再项目根目录的package.json文件中scripts节点下配置新增dev脚本：

"scripts":{"dev":"webpack"
}

其实dev节点的名称我们可以随意的起，但是为了便于他人解读或者以后自己查阅，我们最好使用dev（development），然后我们就可以通过终端运行：

npm run dev

启动webpack来对项目包进行构建

完成之后，会多出来一个dist目录，目录下会出现一个main.js文件，这个文件就是我们自己编写的JS文件经过webpack处理之后的一个文件了

二.基于webpack的小案例

当然我们现在并没有一个html或者js文件，所以之前的操作可以说是纸上谈兵，我们现在开始以工程化的标准来做一个demo ：

首先我们新建一个项目目录-->运行npm init -y来初始化一下包管理配置文件-->新建一个src目录里面存放我们的html与js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../dist/main.js"></script>
</head>
<body><ul><li></li></ul>
</body>
</html>

如果我们有点懒，不如再下载一个jquery包来协助我们：

npm i -S jquery

然后使用ES6：import导入新语法将jquery导入到我们自己的JS文件中

import $ from "jquery"$(()=>{$("li").css('backgroundColor','red')
})

到此位置-基础工作就已经做好了

我们如果不使用webpack工具的话，现在我们的页面是无法显示出来效果的，import导入语法是ES6新语法，一些浏览器是不支持的，所以我们不仅仅是规范化、压缩优化、还解决了兼容性

接下来我们使用webpack工具来对这些文件做处理：

我们接着上面webpack操作来阐述

这时配置文件都已经处理好了，我们直接使用npm run dev来启动运行webpack

这时会多出来一个dist目录，目录下会出现一个main.js文件，这个文件就是我们自己编写的JS文件经过webpack处理之后的一个文件了，这个main文件中就是我们的jquery与我们自己写的JS代码了

三.解决一些使用webpack的问题

其实我们观察main中的代码，jquery人家本来就压缩了，我们不需要再压缩混淆了，当我们看到自己的代码时，发现其实并没有压缩：

为什么呢？webpack没有帮我们压缩混淆吗？

其实并不是，我们还记得在webpack.config.js配置文件中所做的配置吗？

当使用终端命令npm run dev使webpack启动运行时，webpack并没有直接去运行，而是先去读取了webpack.config.js文件，拿到了配置文件向外导出的配置选项之后，根据配置选项执行webpack操作，那么我们当时配置的是

 mode:'development'

开发时......所以我们知道了，只要将development改为production，然后再去run一下，我们的代码就被真正压缩了，这样的话虽然代码压缩了，但是非常的耗时间，建议我们在项目需要上线时再进行压缩混淆

webpack默认的打包入口文件为src目录下的index.js，什么意思呢？

意思就是如果你要打包处理的文件如果不在src目录下（或者压根没有src目录），或者是src目录下没有index.js的话就会报错的；俩者缺一不可

除了默认的打包路径，还有一个默认的输出路径，我们都不陌生，就是dist目录下的main.js文件

我们可以修改这俩个路径：

（这里需要用到path模块进行路径指引）

Node.js——三种方法解决fs模块路径动态拼接的问题_Developer小蜗的博客-CSDN博客

在webpack.config.js配置文件中先导入path模块：

const path = require('path')

然后在暴露对象中添加entry打包入口路径、output输出存放路径：

module.exports = {//这是我们之前配置的webpackmode:'development',//指定处理哪个文件entry:path.join(__dirname,'./src/test.js')//指定打包处理完成的文件存放路径以及新文件名output:path.join(__dirname,'dist'),filename:'testmain.js'
}

四.webpack-dev-server

基本操作问题解决了，可是还有一些让人头疼的问题：

比如我们每次修改完源代码都要在终端执行一次npm run dev，一俩次还好，如果我们一直修改并想查看效果的话，真的是非常的麻烦

根本问题是不人性化，我们想要的是，当我Ctrl+S的时候自动就生成了新的webpack打包文件

这时我们就需要用到webpack-dev-server这个插件工具了，每次保存文件，webpack都会自动的进行项目打包构建

我们想要使用一个插件总结无非就是俩步-->安装-->配置

首先我们安装webpack-dev-server：

npm i webpack-dev-server -D

配置时我们需要在package.json文件中的scripts节点中的dev命令改为webpack server（之前我们直接写的webpack）：

"scripts":{"dev":"webpack serve"
}

然后我们运行npm run dev

这时我们会发现执行完毕本次打包操作之后webpack并没有关闭，一直处于启动状态，其实这时的webpack正在监听项目中源代码的变化，只要修改了源代码，就会执行一次实时打包

（我们Ctrl+C就可以关闭掉）

等等.....这个关闭操作怎么这么眼熟呢？没错，这就是我们关闭服务器某一个端口的操作，其实这时的webpack只是在内存中打包了指定的文件（新文件存储在新开辟的内存中），并不是在磁盘中（或者说项目根目录下），项目根目录中的main.js文件没有被修改

那这样我们也没法查看呀，还不如直接run一下呢.....

其实我们还需要用到第二个插件工具：

五.html-webpack-plugin

老规矩-下载-->配置

npm i html-webpack-plugin -D

这个插件做什么工作的呢？

它是用来帮我们把指定页面复制出一份放到根目录中（那我们是不是就可以将存在于内存中的新文件复制一份保存在根目录中呢？）

配置需要在webpack.config.js文件中进行：

//导入html-webpack-plugin插件
const HtmlPlugin = require('html-webpack-plugin')
//这时我们得到了一个构造函数，我们需要创建一个该插件的实例对象const htmlPlugin = new HtmlPlugin({//原文件存放路径template:'.src/index.html',//指定生成文件存放路径filename:'./index.html'
})module.exports = {mode:'development',//插件数组（我们所用到的插件都会放到该数组中）plugins:[htmlPlugin]
}

tips：我们要知道现在物理磁盘（项目根目录）中的index.html文件虽然和内存中自动生成的文件效果、呈现状态都是一样的，但是这俩个文件不是一个文件，是复制出来的另一个文件

六.devServer

在webpack.config.js配置文件中，我们可以通过devServer节点来对webpack-dev-server插件进行更多的配置：

deServer:{//初始化打包完成之后自动打开浏览器open:true,//打开浏览器所使用的主机地址host:'127.0.0.1',//所使用的端口号port:80
}

七.@标识符导入模块

我们在导入其他模块到指定模块中会使用import：

import xx from '../../../../../../../../../../../../../../index.css'

我觉得这并不好看，所以我们觉得使用一个符号来代替，如果我们想要在一个指定的文件夹中从外往里找的话：

需要在webpack.config.js的配置文件中添加一个resolve节点：

resolve:{alias:{'@':path.join(__dirname,'./src/')}
}//这时就相当于告诉webpack程序猿写的代码中@表示的是src这一层目录

前提是你需要引进path模块再进行这个操作

一定要知道的简单配置Webpack操作相关推荐

dwz简单配置与操作
1.首先将dwz的文件放到你的项目中(http://yunpan.cn/QbTH4kN6UXX9B) 2.在页面中将前台数据复制到页面中,将js,css等路径配置好 3.这个地方一定要配置好,xml文 ...
Webpack4 学习笔记 - 01：webpack的安装和简单配置
安装 webpack 新建一个Demo文件夹,执行初始化: npm init 在Demo文件夹里安装 webpack 和 webpack-cli : npm install webpack webpa ...
建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
webpack简单配置
webpack有4个重点内容: 入口(entry):指示webpack 应该使用哪个模块,来作为构建其内部依赖图的开始输出(output):告诉 webpack 在哪里输出它所创建的 bundles ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
cnpm安装webpack_【6000字】从0到1，配置webpack
前言随着前端工程化,webpack已经是必不可少的打包工具,然鹅,我们在日常工作中,都是使用vue-cli等脚手架,0配置直接写业务代码,这个我个人是支持的,毕竟这样可以让同学萌更专注业务代码. 但 ...
简单配置nginx反向代理，实现跨域请求
简单配置nginx去做反向代理,实现跨域请求简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档先介绍几个nginx命令打开n ...
virtualbox 创建桥接网络_VirtualBox桥接网络的简单配置，让虚拟机直接访问网络
VirtualBox桥接网络的简单配置,让虚拟机直接访问网络分类: Linux 2009-08-20 08:59 5071人阅读评论(0) 收藏举报 (1)最新的 VirtualBox 可以简单 ...

一定要知道的简单配置Webpack操作

一.初识Webpack-安装与配置

二.基于webpack的小案例

三.解决一些使用webpack的问题

四.webpack-dev-server

五.html-webpack-plugin

六.devServer

七.@标识符导入模块

一定要知道的简单配置Webpack操作相关推荐

最新文章

热门文章