使用webpack 4打包项目---基础篇

最新推荐文章于 2022-08-18 17:45:32 发布

家里有蜘蛛

最新推荐文章于 2022-08-18 17:45:32 发布

阅读量1.3k

点赞数 5

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_44983621/article/details/106021059

版权

webpack 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

webpack 4打包项目—基础篇

文章目录

webpack 4打包项目---基础篇

全局安装webpack4

npm i webpack -g
npm i webpack-cli -g

webpack4在安装时跟3不一样，还需要安装一个webpack-cli

打包项目

例如：打包一个文件，这个文件依赖了jQuery

npm  init -y //初始化一个项目
npm i jquery  // jquery依赖
npm i webpack webpack-cli -D //在项目中安装webpack依赖

一个简单的隔行变色案例

目录结构如下

在这里插入图片描述

index.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script  src="main.js"></script>
</head>

main.js模块

import $ from 'jquery'

$(function() {
    $('li:odd').css('backgroundColor','aqua')
    $('li:even').css('backgroundColor','white')
})

如果这里我们不打包的话在浏览器里面直接运行会报错，浏览器中不能直接使用import加载包，使用webpack 能解决这个问题，当然这个只是一点用处，最关键的是他能把网站中的静态资源做一个整合打包，减少这个请求的次数等等。

接下来说一下基础用法

我们需要把main.js 打包，以下均为webpack 4写法

webpack ./src/main.js -o /dist/bundle.js

这行命令的作用是打包main.js文件，并把打包好的文件存储到dist目录中的bundle.js（会自动创建这个文件，名称是自定义的）文件中。

这样我们在index.html中 src改为的bundle.js就行了

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script  src="../dist/bundle.js"></script>
</head>

这样我们这个就打包好了，但是我们的main.js文件，每改变一次都需要我们重新敲那么长的命令，那有没有方法能够简化这个命令呢？答案是肯定的。

这个需要我们在项目根路径下创建一个文件webpack.config.js并在文件中配置如下，这个模块是基于node的

const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/main.js'), //入口
    output: {
        path: path.join(__dirname, './dist'), //输出
        filename: 'bundle.js'
    },
    mode:'development'
}

这样我们每次重新打包的时候，只需要输入webpack就行了，省去了打包文件和存入文件。

webpack-dev-server

然而这样还是会感觉很麻烦，每改变一次都需要我们手动重新打包才行，因此我们用到了webpack的一个包webpack-dev-server可以自动编译打包。

在项目中安装webpack-dev-server

npm i webpack-dev-server -D

这个包就类似于node 中的 nodemon 自动编译打包。

由于这个包并不是全局安装的，因此我们需要在package.json中配置如下

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },

然后我们直接npm run dev就可以了，这个就可以启动了，默认是访问http://localhost:8080得到下图

在这里插入图片描述
点击src就能进入我们的主界面。

但是你会发现这个虽然每次保存都会编译打包，但是这个界面却没有任何变化，样式并没有生效，这又是怎么回事呢？其实经过这一通操作之后，在我们的根目录下的内存中生成了一个bundle.js文件，它并没存到磁盘上，因此我们看不见，因为我们这个文件需要反复的编译打包，因此并不适合存到磁盘上，而是存储到了内存中，因此我们这个index.html中引入的时候需要改成如下

    <script  src="/bundle.js"></script>

这样就相当于我们引入的内存中的bundle.js，就ok了。

webpack-dev-server 的命令参数

但是呢，我们发现当我们启动webpack还得需要自己手动点击这个http://loaclhost:8080这个链接才行，那有没有办法使操作更简便呢？

//默认启动
webpack-dev-server --open  
//更换为 3000端口号 
webpack-dev-server --port 3000
// 默认根路径
webpack-dev-server --contentBase src
//热更新 --相当于局部更新bundle里面的内容，还有就是无刷新更新页面，这个主要是针对css样式的，对js无作用
webpack-dev-server --hot

其实这个还有另一种写法，在配置文件中配置

webpack-config.js文件

const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    mode:'development',
+   devServer: {
+       open: true,
+       port: 3000,
+       contentBase: 'src',
+       hot: true
+   }
}

这样的话也可以实现第一种效果，我们的一些基本需求也就ok了。

家里有蜘蛛

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
使用webpack 4打包项目---基础篇

webpack 4打包使用—基础篇文章目录webpack 4打包使用---基础篇全局安装webpack4打包项目webpack-dev-serverwebpack-dev-server 的命令参数全局安装webpack4npm i webpack -gnpm i webpack-cli -gwebpack4在安装时跟3不一样，还需要安装一个webpack-cli打包项目例如：打包一个文件，这个文件依赖了jQuerynpm inti -y //初始化一个项目npm i jquery
复制链接

扫一扫