webpack相关配置

```

mkdir webpack-start

cd webpack-start

npm init

webpack4.6-5 0配置打包

npm install webpack -g

本地安装

npm install webpack webpack-cli -D

npm init -y

npmx *** 直接找项目中bin下的安装的文件

- webpack中所有文件都是模块

### 模块化

- AMD

- CMD

- es6Module

- commonjs

webpack.config.js

是基于node的必须遵循commonjs规范



let path = require('path');


module.exports = {

    entry: './src/index.js',//入口 代表从哪里开始打包 默认./src/index.js
    output: {
        filename: 'build.js',//打包之后的文件
        path: path.resolve('./build'),//打包到哪个路径 必须是绝对路径
    },//出口
    devServer: {
        // contentBase:'./build',//内容的基础路径
        static:'./build',//内容的基础路径
    },//开发服务器
    module: {},//模块配置 配置模块加载 比如图片模块 js模块等等
    plugins: [],//插件的配置
    mode: 'development',//可更改的模式  比如打包之后就是一行 dev是可阅读的代码
    resolve: {},//配置解析

    // webpack中配置开发服务器  
    // npm install webpack-dev-server -D
    // npx webpack-dev-server

}

{
  "name": "demo_step1",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "dev":"webpack-dev-server",
    "start":"npm run dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

# webpack相关配置

webpack相关配置