1.开启webpack监听,文件改动自动更新
- package.json文件
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^2.0.0",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^4.30.0",
"xml-loader": "^1.2.1"
}
}
- webpack.config.js文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
plugins: [
+ new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
- 现在从命令行运行npm run watch,您可以看到它没有退出命令行,因为脚本当前正在监视您的文件。现在保存文件并检查终端窗口。您应该看到webpack自动重新编译更改的模块!唯一的缺点是您必须刷新浏览器才能看到更改。
2.webpack-dev-server 实现热模替换
- webpack-dev-server为您提供了一个简单的Web服务器以及使用实时重载的功能。
npm install --save-dev webpack-dev-server
webpack.config.js文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
+ devServer: {
+ contentBase: path.join(__dirname, 'dist'),
+ compress: true,
+ port: 8000,
+ publicPath: '/assets/'
+ },
plugins: [
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
- 以上配置告诉webpack-dev-server您要从dist目录中的文件提供文件
- 最后添加一个脚本来轻松地运行开发服务器:
package.json文件
{
"name": "development",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack-dev-server --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^2.0.0",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"express": "^4.15.3",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.11.0",
"xml-loader": "^1.2.1"
}
}
- 现在我们可以从命令行运行npm start,我们将看到浏览器自动加载页面。如果现在更改任何源文件并保存它们,则在编译代码后,Web服务器将自动重新加载。试试看!
- 问题:webpack和webpack-dev-serve会产生版本兼容问题,本次亲测如下版本组合有效:
"webpack": "^4.44.1",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.11.0",
-
webpack-dev-server编译后不写入任何输出文件。相反,它将捆绑文件保留在内存中,并像在服务器根路径上挂载的真实文件一样提供它们。如果您的页面希望在其他路径上找到捆绑文件,则可以使用publicPath开发服务器的配置中的选项进行更改。