webpack学习

一、

npm init -y
webpack打包命令：webpack .\src\main.js -o \dist\bundle.js

二、webpack直接打包

1、安装webpack-dev-server

cnpm i webpack-dev-server -D

再根据提示安装依赖包

2、配置文件webpack.config.js

// 由于 webpack 是基于node进行构建的，所以，webpack配置文件中，任何合法的node代码都是支持的
const path=require('path')
// 当以命令行形式运行webpack 或者webpack-dev-server 的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时
// 会检查项目根目录中的配置文件，并读取这个文件，就拿到了到处的这个 配置对象，然后根据这个对象，进行打包工间
module.exports={
   
  entry:path.join(__dirname, './src/main.js'),//入口文件
  output:{
   //指定输出选项
    path:path.join(__dirname,'./dist'),//输出路径
    filename:'bundle.js' //输出文件的名称
  }
}

此时输入webpack可以直接打包

三、实时打包，实时更新，实时编译

在packge.json中配置脚本
在“script中添加”

    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot&