FT（第一天） - webpack4.0 入门第二节（笔记）_node webpackdevmiddle 无效-优快云博客

1.source-map 通过devtool字段配置 devtool:'cheap-module-source-map' 具体不同devtool value的不同请移步官网查看

2.devServer webpack内部其实已经内置了devServer

1）当我们改变文件，想要浏览器自己监视文件变动可以添加--watch参数（忽略此做法）

2）安装webpack-dev-server 配置devserve devserver会开启一个服务器来启动我们打包好的项目

  devServer: {
    contentBase: path.join(__dirname, 'dist'),           //配置启动服务的文件夹
    compress: true,
    open:true,                                           //自动打开浏览器窗口
    port: 4000，                     //4000端口打开浏览器窗口
    proxy：{ 
      '/api': 'http://localhost:3000'           //代理地址设置
    }，
    hot:true                                   //hmr  热更新     
    hotOnly:true，    
  },
    
  plugins:[
     new webpack.HotModuleReplacementPlugin({});             //热替换插件
  ]

3）在node中启动webpack 首先安装express webpack-dev-server （这样的不会生成dist没目录） webpack-dev-middlewer 伪代码如下：

const express = require("express")
const webpack= require("webpack")
const webpackDevMiddlewer= require("webpack-dev-middlewer")
const webpackConf= require("./webpack.config.js")

const app = new express() 

const complier = webpack(webpackConf)

app.use(complier) 

app.listen(3000,function(){})

3.转换es6语法
1）安装babel-loader 把我们的js语法与babel链接起来，但是babel-loader 不会去转换es6语法，这时候需要安装：

npm install @babel/preset-env --save-dev 做es6转义es5

rules: [
   { 
    test: /\.js$/,
    exclude: /node_modules/,  
    loader: "babel-loader"，
    options:{
       "presets":[ ["@babel/preset-env",{
          "useBuiltIns": "usage",     //pollyfill参数   这个字段只会生成我们需要的js函数比如map 没用到的peomise就不会去生成
        }]]   //这个配置将es6翻译成es5语法
    }                         
   } 
]

4.补充超低版本浏览器对一些js函数的缺失使用在入口文件引入import "@babel/polyfill";