webpack

npm install webpack@3.11.0 -g
安装webpack

安装nrm
npm i nrm -g
查看镜像源
nrm ls 
选择淘宝镜像源
nrm use taobao

01-webpack-cli
文件:app.js, calc.js, index.html
将浏览器不认识的app.js,calc.js打包成认识的index.js
命令: webpack  ./app.js ./index.js

02-webpack-config
文件:src>(app.js+calc.js) + index.html + webpack.config.js
配置webpack.config.js

` const path = require('path')
  module.exports = {
    // 入口文件
    entry: './src/app.js' ,
    // 输出文件
    output: {
        // 文件路径（绝对路径）
        path: path.join(__dirname, 'dist'),
        // 文件名
        filename: 'bundle.js'
    }
  }
`
命令： webpack
webpack自动查找webpack.config.js配置文件，自动将入口文件输出; 缺点，改一次文件，就要手动输入一次webpack命令

npm init -y :快速创建项目描述文件 package.json

03-webpack-dev-serve    热刷新
文件: src>(app.js+calc.js) + index.html + webpack.config.js
配置文件webpack.config.js
`
const path = require('path')
module.exports = {
// 配置入口文件
entry: './src/app.js',
// 配置输出文件
    output: {
        // 输出文件的路径(绝对路径)
        path: path.join(__dirname, 'dist'),
        // 静态资源在服务器上的访问路径
        publicPath: '/dist',
        // 表示输出文件的名字
        filename: 'bundle.js'
    }
}
`
webpack-dev-server: 基于express开启一个服务器, 在内存中创建一个dist文件夹，bundle.js，本地文件找不到
通过http://localhost:8080/dist/bundle.js可以在浏览器查看文件

webpack-dev-server --inline --hot --open --port 8080
--inline 自动刷新 --hot热重载
缺点：命令太长
在package.json中配置"scripts"脚本
"dev": "webpack-dev-server --inline --hot --open --port 8080"
然后运行命令 npm run dev
npm运行刚刚配置的dev脚本: "webpack-dev-server --inline --hot --open --port 8080"