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

Try Tomato

已于 2022-04-22 17:22:10 修改

阅读量776

点赞数 1

分类专栏： + Webpack 文章标签： javascript webpack 前端工程化前端压缩混淆

于 2022-04-20 19:03:02 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124301163

版权

+ Webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

五.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 = {
    //这是我们之前配置的webpack
    mode:'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模块再进行这个操作

Try Tomato

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
一定要知道的简单配置Webpack操作

目录一.初识Webpack-安装与配置二.基于webpack的小案例三.解决一些使用webpack的问题四.webpack-dev-server五.html-webpack-plugin六.devServer七.@标识符导入模块一.初识Webpack-安装与配置Webpack是前端工程化的一个具体解决方案提供了友好的前端模块化开发支持、代码压缩混淆、解决浏览器对于JavaScript低级高级语言兼容性的处理，优化性能等等，极大的提高了开发的效率与项目可维护...
复制链接

扫一扫