webpack的两种项目打包方式

最新推荐文章于 2024-03-06 20:21:48 发布

m0_46302126

最新推荐文章于 2024-03-06 20:21:48 发布

阅读量398

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/m0_46302126/article/details/124424623

版权

webpack的两种项目打包方式

手动打包

1.新建项目文件夹

2.初始化管理配置文件package.json

npm init -y

3.新建src目录

4.新建

src -> index.html 内容为

<!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="./main.js"></script>
</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>
    </ul>
</body>
</html>

src -> index.js

5.安装jquery

npm install jquery -s

src->index.js

import $ from 'jquery'

$(function(){
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','pink')
})

7.安装webpack

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

8.根目录下创建webpack.config.js

module.exports = {
    mode : 'development'
}

9.修改package.json

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

10.运行

npm run dev

自动打包

1.新建项目文件夹

2.初始化管理配置文件package.json

npm init -y

package.json内容

{
  "name": "2",//文件夹名字
  "version": "1.0.0",//版本号
  "description": "",
  "main": "index.js",//默认执行的js文件，在src-》index.js中
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

注意：由此可知文件夹的名字是可以更改，但是更改后还需要更改package.json的name属性值

如果需要修改js执行文件名，也是一样

3.当前文件夹新建文件

src->index.html

src->index.js

4.编辑内容

index.html内容

<!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="../bundle.js"></script>
    //此文件是需要在运行webpack serve时候，会将js解析加载到../bundle.js,但无法看到具体文件
</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>
    </ul>
</body>
</html>

index.js

import $ from 'jquery'//导入jq

$(function () { 
    $('li:odd').css('background-color', 'red') ,
    $('li:even').css('background-color', 'black') 
})
//使用jq执行函数

5.导入jquery

npm install jquery -s

6.安装webpack

7.配置webpack，创建webpack.config.js

const path = require('path')
module.exports = {
    mode : "development",//webpack的模式
    entry:path.join(__dirname,'./src/index.js'),//配置入口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:'bundle.js'
    }//配置输出文件
}

8.安装webpack-serve

npm install webpack-dev-server@3.11.2 -D

9.配置webpack-serve，修改package.json文件

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

10.运行webpack-serve

npm run dev

11.访问网站

localhost:8080

12.修改index.js的文件，看页面是否同步更新

import $ from 'jquery'//导入jq

$(function () { 
    $('li:odd').css('background-color', 'red') ,
    $('li:even').css('background-color', 'pink') 
})
//使用jq执行函数

m0_46302126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的两种项目打包方式

webpack的两种项目打包方式手动打包1.新建项目文件夹2.初始化管理配置文件package.jsonnpm init -y3.新建src目录4.新建src -> index.html 内容为<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
复制链接

扫一扫