四、 使用webpack-dev-server插件为项目配置提供web服务及实时刷新

关于webpack-dev-server，它主要提供两个功能：
1、为静态文件提供服务
2、自动刷新和热替换(HMR) 

npm i webpack-dev-server --save-dev

在webpack.config.js中修改如下代码

先引入 const webpack = require(‘webpack’); 

plugins: [
	new MiniCssExtractPlugin({
		filename: "[name].css",
		chunkFilename: "[id].css"
	}),
	new HtmlWebPackPlugin({
		template: "./public/index.html",
		filename: "./index.html"
	}),
	new CleanWebpackPlugin(),
	new webpack.HotModuleReplacementPlugin()    //引入热更新插件
],
devServer:{
	host:'localhost',   //服务器的ip地址
	port:8080,         //端口
	open:true,        //自动打开页面
	hot:true   //开启热更新
}
执行 
webpack-dev-server
如果浏览器自动打开http://localhost:8080/ 说明成功了

我们把package.json配置改一下 

  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
执行 npm run dev,同样也可以自动打开http://localhost:8080/，不过此时npm run dev并没有生成dist目录了，这是因为devServer会将webpack构建出的文件保存到内存里，不需要打包生成就能预览。

更多文档：https://webpack.docschina.org/configuration/dev-server/

五、安装vue相关模块建立 vue 项目

参考vue-cli3.0建立vue项目 

npm i vue vue-router vuex --save
npm i vue-loader vue-template-compiler --save-dev
webpack.config.js增加： 
// 解析vue
{
	test: /\.vue$/,
	loader: 'vue-loader',
	options: {
		loaders: {}
	}
}

参考vue-cli,新建项目一些文件如图所示

六、项目配置优化


1、不同环境下的配置和优化devtool中的source-map 

config.devtool = '#source-map';

2、提取公共依赖 

//生产环境
if(isProd){
	config.entry = {
        app: path.join(__dirname,'src/main.js'),
        vendor: ['vue']   
    }
    config.output.filename = '[name].[chunkhash:8].js'; 
    config.plugins.push(
        new webpack.optimize.CommonsChunkPlugin({          //定义静态文件打包
            name: 'vendor'
        })
    )
}

待续…