总结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的知识

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页