webpack3基本使用

深碍√TFBOYSˉ_ 2023-06-30 09:26 27阅读 0赞

# 基本使用 #

目录结构

webpackdemo1
    	-dist
    	-src
    		-main.js
    		-index.html

cd到webpackdemo1的目录下，执行以下命令

# 全局安装webpack3
    cnpm i webpack@3 -g
    
    # 初始化
    npm init -y
    
    # 安装jquery
    cnpm i jquery@2 -S

main.js

import $ from 'jquery'
    
    $(function () { 
        $(document.body).css("background", "pink")
    })

main.js不能直接在浏览器运行，需要使用webpack编译

# webpack 源文件 目标文件
    webpack ./src/main.js ./dist/bundle.js

index.html

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

# 使用配置文件 #

每次修改main.js文件后，重新编译都需要写命令，很麻烦，这时候可以使用配置文件

在webpackdemo1目录下新建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"
        }
    }

后面每次重新编译，直接输入以下命令即可

webpack

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack3基本使用

基本使用目录结构 webpackdemo1 -dist -src -main.js -index.html cd

深碍√TFBOYSˉ_/ 2023年06月30日 09:26/ 0 赞/ 28 阅读

相关 webpack 基本概念

文章目录一、什么是 webpack 二、五个核心概念 1. 入口（entry）

约定不等于承诺〃/ 2023年03月04日 08:29/ 0 赞/ 76 阅读

相关 Webpack基本配置

安装webpack 全局安装全局安装 `npm install webpack -g` 指定版本安装 `npm install webpack@3.6.0 -g

曾经终败给现在/ 2023年01月07日 07:21/ 0 赞/ 320 阅读

相关 Webpack基本使用

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 ![在这里插入图片描述][waterma

古城微笑少年丶/ 2022年12月09日 15:52/ 0 赞/ 200 阅读

相关 webpack 项目使用 html-webpack-plugin（3）

html-webpack-plugin 这个插件的功能是将 html 文件打包，在上一篇的博客中我们使用webpack-server将webpack项目使用本地的项目打开如：l

冷不防/ 2022年09月03日 08:25/ 0 赞/ 274 阅读

相关 axios + webpack + vue。 axios基本使用

目的：在wepack+vue 项目中使用 axios 第一步：安装 cnpm i axios -S 第二步：导入 2-1导入：import axi

Dear 丶/ 2022年05月14日 09:20/ 0 赞/ 376 阅读

相关 2.2.3 使用webpack loader

loader 是作用于应用中资源文件的转换行为。它们是函数（运行在 Node.js 环境中），接收资源文件的源代码作为参数，并返回新代码。举个栗子，可以通过 jsx-

àì夳堔傛蜴生んèń/ 2022年01月30日 04:01/ 0 赞/ 310 阅读

相关 webpack_3

![1726006-20190723234345481-703495301.png][] url-loader {

桃扇骨/ 2021年11月11日 00:26/ 0 赞/ 286 阅读

相关前端自动化构建工具 Webpack—— 2 webpack最基本的使用方式

Webpack可以做什么事情？ 1.webpack能够处理JS文件的互相依赖关系； 2.webpacck能够处理JS的兼容问题，把高级的、浏览器不识别的语法，转为低级的，

- 日理万妓/ 2021年11月04日 11:50/ 0 赞/ 405 阅读

相关 webpack3 安装配置、基本应用

webpack 构建工具 (1)自带模块换(commonjs规范) (2)编译es6->es5,jsx-es5 (3)自带服务器

亦凉/ 2021年07月24日 21:17/ 0 赞/ 757 阅读