yarn global add webpack@4 webpack-cli@3 
npm install 改成yarn add

Live loading

use webpack-dev-server

install

npm install webpack-dev-server —save-dev

Use

use script (Recommend)

  "scripts": {
    "start": "webpack-dev-server",
  },

or
use cli

npx webpack serve

Loader VS Plugin

babel-loader
css-loader

使用scss
install

yarn add sass-loader dart-sass --dev

node sass过时了，优先使用dart sass

Lazy load 懒加载

const button = document.createElement('button')
button.innerText = 'lazy load'
button.onClick = ()=>{
  const promise = import('./lazy')
  promise.then( (module)=>{
    const fn = module.default
    fn()
  }, ()=>{
    console.log('lazy load error')
  }
  )
}

使用import就可以实现懒加载
关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。

CSS-loader VS Style-loader
css-loader 负责解析css
style-loader 创建style标签，添加到dom