使用inline-source-map实现错误追踪
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map', //使用source-map
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
使用观察模式
package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch", //定义 watch 指令来执行 webpack --watch操作
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"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": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
使用npm脚本
npm run watch
此时 webpack 开始编译代码,但不会退出命令行,因为 script 脚本正在观察文件,当修改文件时可以看到webpack自动编译后的模块,此时刷新浏览器页面可以看到修改后的效果。
使用webpack-dev-server实现浏览器实时重新加载
安装webpack-dev-server
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 = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
devServer: { //使用开发服务器
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open", //新增start指令来启动开发服务器
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"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": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
使用 npm 脚本
npm start
此时浏览器会自动加载页面,当修改并保存任意源文件时,开发服务器会自动重新加载编译后的代码!
使用模块热替换
npm install --save-dev webpack-hot-middleware
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack'); //引入webpack?
module.exports = {
entry: {
//print: './src/print.js', //去掉print,后面会通过热加载使用
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true //配置开发服务器启用热替换
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin(),
new webpack.NamedModulesPlugin(), //引入相关插件
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
修改index.js文件
import $ from 'jquery'
import printMe from './print.js';
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
printMe();
})
}
使用 npm 脚本
npm start
此时浏览器会自动加载页面,当修改模块中的文件时,开发服务器会自动替换修改后的模块!
使用模块热替换自动更新CSS文件
重新安装style-loader css-loader
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
module: { //重新启用loader模块
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new CleanWebpackPlugin(['dist'])
new HtmlWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
修改index.js
import $ from 'jquery';
import printMe from './print.js';
import './css/styles.css'; //重新引入style.css文件
使用 npm 脚本
npm start
此时浏览器会自动加载页面,当修改style.css文件时,开发服务器会自动替换新的样式文件!
编辑器具有“安全写入”功能,使用自动编译代码时可能会受到影响。
常见编辑器禁用“安全写入”功能:
- Sublime Text 3 - 在用户首选项(user preferences)中添加
atomic_save: "false"
。- IntelliJ - 在首选项(preferences)中使用搜索,查找到 "safe write" 并且禁用它。
- Vim - 在设置(settings)中增加
:set backupcopy=yes
。- WebStorm - 在
Preferences > Appearance & Behavior > System Settings
中取消选中 Use"safe write"
。
。。。