001、node & webpack工程手动搭建

01、安装node.js

02、新建工程目录Webpack

03、初始化node工程

npm init

　　根据提示，输入工程信息

04、本地安装webpack（可使用更新的版本）

npm install webpack@5.1.0 --save-dev

05、新建子目录

　　dist----编译后文件所在路径

　　src----代码路径

06、新建webpack.config.js配置文件(CommonJS语法)

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    }
}

　　entry:源代码入口

　　output:编译后文件放置路径 & 文件名

　　在src下建main.js文件

07、在package.json中添加命令

"build": "webpack"

08、使用npm run build来编译

• npm run build会执行package.json中scripts下定义的build脚本，即会执行webpack命令
• 执行package.json中的scripts下的脚本时，首先会寻找本地node_modules/.bin路径下的命令，找不到，则用全局命令

09、webpack说明（直接执行webpack命令时，需要自己找到webpack命令所在目录执行，不同于使用npm）

• 正常使用时,webpack ./src/main.js ./dist/bundle.js
• 若有webpack.config.js配置，则配置中已经有源文件和目的文件，只需要执行webpack命令即可