webpack4.0~ 手动配置

参考:https://juejin.cn/post/7031498444027985934#heading-44
webpack 4.44.1 webpack-cli 3.3.12

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

(注意:下载全局配置 mkdir webpack-demo && cd webpack-demo -g)

npm install webpack webpack-cli --save-dev

执行命令

npx webpack hello.js --output-filename hello.bundle.js --output-path . --mode development
--- ------- --------  -------------------------------- ---------------  -----------------   
npx                                  类似 npm包管理工具
webpack                              webpack是工具集合
hello.js                             输入文件
--output-filename hello.bundle.js    输出文件名
--output-path .                      输出文件地址
--mode development                   运行开发模式

npx webpack hello.js --output-filename hello.bundle.js --output-path . --mode development  --watch  
// 监视动态

npx webpack hello.js --output-filename hello.bundle.js --output-path . --mode development  --progress
// 打包模块

npx webpack hello.js --output-filename hello.bundle.js --output-path . --mode development  --display-modules
// 打包引用模块

//老的打包效果
"webpack":"webpack --config webpack.config.js --progress  --display-modules --colors --display-reason"

// 设置:--config webpack.config.js  
// 进度:--progress
// 打包:--display-modules 
// 颜色:--colors
// 原因:--display-reason

webpack.config.js

const path=require('path');
module.exports={
    mode :'development',
    entry:path.join(__dirname,'./src/main.js'),//指定要打包的文件
    output:{
        path:path.join(__dirname,'./dist'),//指定打包输出文件目录
        filename:'bundle.js'//指定输出的文件名
    },
    watch:true   // 热更新
};

执行命令

webpack 

pack.json 文件

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

执行

npm run dev