创建webpack打包编译的前端项目

前提：安装node,安装过程略,网上有一大堆的教程

新建一个项目根目录

common-nav-head-ui

创建项目下的模块

目录名	用途
build	放置webpack编译相关的配置
config
dist	编译生产环境的文件存放目录
src	开发目录

初始化package.json

cd common-nav-head-ui
npm init
按提示输入即可,如下图

在package.json中配置两个命令缩写

启动开发环境
npm run dev
编译项目
npm run build

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

安装webpack相关包

npm install webpack webpack-cli webpack-dev-server --save-dev

–save-dev 代表包只是开发环境需要依赖，版本号信息会自动写入package.json的devDependencies，编译生产环境代码时不会编译进去