webpack结合VScode的基本使用方法

最新推荐文章于 2023-12-18 22:55:30 发布

yanwuhc

最新推荐文章于 2023-12-18 22:55:30 发布

阅读量1.5k

点赞数 2

分类专栏： JavaScript webpack 文章标签： javascript node.js

本文链接：https://blog.csdn.net/weixin_44303404/article/details/108568167

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

webpack

4 篇文章 1 订阅

订阅专栏

前提条件：配置好了node.js环境。

先打开vscode，打开项目文件夹，同时打开终端。输入代码

npm init -y

进行初始化。初始化完成后，会出现一个叫package.json文件，里面有相关配置信息。

在这里插入图片描述

因为这是一个前端项目，所以需要创建一个src文件夹，同时创建相关的html、css、JavaScript文件。并写入自己的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第1个项目</li>
        <li>我是第2个项目</li>
        <li>我是第3个项目</li>
        <li>我是第4个项目</li>
        <li>我是第5个项目</li>
        <li>我是第6个项目</li>
        <li>我是第7个项目</li>
        <li>我是第8个项目</li>
        <li>我是第9个项目</li>
        <li>我是第10个项目</li>
    </ul>
</body>
</html>

这个例子采用jquery，所以需要安装jquery包。调出终端，在终端写上

cnpm i jquery -S

进行jquery的安装。

其中，最后面有相关参数：-s -d -g

-S——生产环境安装

-D——开发模式安装

-g——全局环境安装

安装后会出现一个文件夹，里面有jquery的包。

在这里插入图片描述

4.写上JavaScript代码。

// javascript代码
import $ from 'jquery'
$(function(){
    $('li:odd').css('backgroundColor','lightblue');
    $('li:even').css('backgroundColor','white');
})

5.运行一下，发现报错：

在这里插入图片描述

原因是：

import $ from 'jquery'

属于es6语法，并不是所有浏览器都能支持es6语法。因此，使用webpack来处理。

开始安装webpack，在终端输入：

cnpm i webpack webpack-cli -D

备注：-d模式可以自选，这里选用生产模式。

接着需要配置，在自己的项目文件夹里面创建一个文件：webpack.config.js

在这里插入图片描述

同时在里面写上相关配置基础代码。

module.exports = {
    mode:'development' /*这里有两个参数可以修改，一个是development，一个是production。
                        development生产环境，编辑比较快；
                        production需要较长时间编译，但是会对代码进行压缩，挺高性能*/
    
}

但是，webpack如何进行打包呢？仍然需要使用npm命令进行打包。这里需要对package.json文件进行配置。

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

实际上只在script加了一条代码：实际上就是将webpack重命名为dev。

"dev":"webpack"

保存后，在终端输入

npm run dev

执行一下，可以看到终端执行了webpack命令。

在这里插入图片描述

但报错了，同时生成的dist文件夹里面没有相关的内容（main.js）。

在这里插入图片描述

查阅相关资料，发现原来是webpack4.0以上版本可以不需要用配置文件来进行打包。

https://www.cnblogs.com/windowsxpxp/p/12950466.html

https://www.cnblogs.com/tassel/p/12038104.html

参考上面资料，决定继续采用文件配置进行打包。于是修改了配置文件的代码。

const path = require('path');
module.exports = {
    entry:'./src/test.js',
    mode:'development', /*这里有两个参数可以修改，一个是development，一个是production。
                        development生产环境，编辑比较快；
                        production需要较长时间编译，但是会对代码进行压缩，挺高性能*/
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'main.js'
    }
}

重复之前执行终端代码。

npm run dev

得到结果，说明打包成功了。

在这里插入图片描述

同时可以看到出现dis文件夹，里面有main.js文件

这就是模块化后的js文件，在html中可以直接调用。

在这里插入图片描述

备注：在这里我使用的是手动配置执行webpack，webpack4.0以上版本已经可以不需要手动配置了。

默认情况下，

入口为：./src/index.js文件

出口为：./dist/main.js文件

所以不用创建webpack.config.js文件，直接配置好webpack文件然后执行终端指令就行了。

npm run dev

打开浏览器看看：

在这里插入图片描述

成功解决了问题。

yanwuhc

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
webpack结合VScode的基本使用方法

先打开vscode，打开项目文件夹，同时打开终端。输入代码npm init -y进行初始化。初始化完成后，会出现一个叫package.json文件，里面有相关配置信息。因为这是一个前端项目，所以需要创建一个src文件夹，同时创建相关的html、css、JavaScript文件。并写入自己的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫