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