# webstudy

**Repository Path**: zhaoguohao/webstudy

## Basic Information

- **Project Name**: webstudy
- **Description**: web学习仓
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-29
- **Last Updated**: 2024-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

###如何使用webpack快速构建项目
+全局安装webpack
npm install -g webpack
npm install -g webpack-cli

+设置依赖package.json
 "devDependencies": {
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }

+安装模块
-npm install

+新建webpack.config.js
-echo "">webpack.config.js
-配置文件
let path=require('path');//获取路径
let webpack=require('webpack');//获取webpack
module.exports={
   //设置模式:development,production
    mode: 'development',
    //context: path.resolve(__dirname, '../'),
    //设置入口文件
    entry:path.join(__dirname,"./src/index.js"),
    //设置输出目录
    output:{
        path:path.join(__dirname,'dist'),//输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
        filename:"bundle.js",//打包文件名
    },
}

+配置webpack-dev-server
  //设置开发服务器,devserver打包出来的bundle.js会存在内存而不是磁盘，通过localhost/bundle.js直接调用
    devServer:{
        static:{
            directory: path.join(__dirname, 'src'),//
            watch: true,//监控文件变更
        },
        compress: true,//压缩
        hot:true,//热更新
        port: 9000,//指定端口
     }



#webpack自定义指令
webpack-dev-server 
    --open 打开浏览器
    --port 指定端口
    --hot 热更新（只更新修改了的相关代码，类似局部更新，不会每次都生成新的bundle.js而是打个补丁）

#手动创建index.html文件


+引入静态文件
-引入css
-引入图片

注意：
1.不要在index.html文件引用任何资源，只要引入入口js文件就好了
2.