总结webpack4的使用

1、webpack4与webpack3的比较

• 不需要在配置文件webpack.config.js中指定入口以及出口文件

  webpack3的webpack.config.js文件：

const path = require('path')
module.export = {
    output: {
        path: path.resolve(__dirname, './dist')
    },
    entry: './src/index.js'
}

*在webpack4中不需要指定入口和出口：不指定输入文件位置的话，则默认为src/index.js. 不指定输出文件位置，默认为 dist/main.js

2、实时刷新

• 入口文件src/index.js的变化，包括它所引用的其他模块的变化如何通知给webpack,以便重新构建dist/main.js文件？

  ⇒ 使用webpack中的watch： npx webpack –mode development –watch(此处使用webpack是还未装webpack-dev-server包)

• dist/main.js文件更新后，浏览器中打开的页面该如何自动刷新？

  ⇒ 使用webpack-dev-server解决，该包是一个基于express.js的开发服务器。提供实时刷新浏览器页面的功能。（文档中推荐使用webpack-server）
  =>安装该包： npm install -D webpack-dev-server
  => 执行： npm webpack-dev-server –mode development
  3、webpack的配置文件

const path = require('path')
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react']
        }
      }
    ]
  }
}

写完配置文件后只需要运行：npx webpack-dev-server

点击此处查看更多关于webpack的知识