webpack工程化（一）

准备工作：安装node.js、npm（这里不再概述）

1、全局安装yarn，本次搭建webpack工程，全部使用yarn命令,也可使用npm命令

npm install yarn -g

2、创建package.json文件，管理安装包

yarn init -y

3、本地安装webpack,新建webpack.config.js文件

安装4.XX版本，较为稳定

yarn add webpack@4.44.2 -D
yarn add webpack-cli@3.3.12 -D

因为没有全局安装webpack，因此使用npx指令，查看webpack安装情况

npx webpack --help

4、使用webpack进行打包

在同目录下新建src文件夹，在src文件夹下新建app.js

在同目录下新建webpack.config.js，配置基本打包参数（入口、出口）
可参考webpack4官方文档：https://v4.webpack.js.org/concepts/

const path = require('path')
module.exports={
  // 配置环境（开发环境）
  mode:'development', 

  // 配置入口
  entry:{
    app:'./src/app.js'
  },

  // 配置出口
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'app.js'
  }
}

使用npx执行webpack打包命令

npx webpack

可以看到同一目录下生成了打包后的dist文件，里面有打包之后的app.js文件