接下来，我们将使用webpack server帮我们优化开发过程。
再开始之前，我们换需要补一下之前遗漏的内容。
html-webpack-plugin自动生成index.html
目前我们的index.html，仅仅只是引用了我们导入的buddle.js,我们可以使用webpack的插件html-webpack-plugin帮我们生成html
webapck-htmlwebpackplugin
- 安装依赖
npm i -d html-webpack-plugin - 在
webpack.config.js配置插件
const path = require("path");
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: "hello word"
+ })
]
}
这样我们就可以删除index.html,当打包时会在./dist/下生成新的index.html文件
自动清除
webpack-清除dist
1.安装依赖``
2.更新webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "hello word"
})
]
};
这样我们每次构建时，会先删除./dist目录，然后重新生成
开启source map方便debug
webpack编译的时候回对代码做混淆压缩，这样出现bug的时候很难追踪代码
1.更新webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
+ devtool: 'inline-source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "hello word"
})
]
};
好了，接下来开始正题
开启webpack-server
- 安装依赖
npm i -d webpack-dev-server - 更新
webpack.config.js
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist',
+ port:"3000"
+ },
......
这样我们就可以使用npx webpack-dev-server --open，来开启服务器端口为3000
但是好像还有问题，比如开发时我希望能看到具体源码，但是在打包发布时，我并不希望看到具体源码，所以我们再来优化。
使用不同环境不同的webpack配置。使用npm start
参考这个webpack-merge，不做赘述
