- webpack提供了一个可选的本地开发服务器,这个本地服务器是基于Nodejs搭建的,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改代码后的结果
- 不过他是一个单独的模块,在webpack中使用需要安装
npm install --save-dev webpack-dev-server@2.9.3
- devserver也是作为webpack中的一个选项,选项本身可以设置如下属性
-
- contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里需要填写./dist,让他为我门编译过后的文件提供服务
- port:端口
- inline:页面实时刷新
- historyApiFallback:在SPA页面中,依赖H5的history模式
执行命令安装
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm install --save-dev webpack-dev-server@2.9.3
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uuid@2.0.3: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.
dev/blog/math-random for details.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@2.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN simpleconfig@1.0.0 No description
npm WARN simpleconfig@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack-dev-server@2.9.3
added 243 packages from 144 contributors and audited 868 packages in 60.568s
46 packages are looking for funding
run `npm fund` for details
found 15 vulnerabilities (5 low, 9 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>
安装成功,修改webpack.config.js
// 需要从node依赖中引入 需要添加依赖环境
const path = require('path');
// 导入webpack内置插件
const webpack = require('webpack')
// 导入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入JS压缩插件
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 配置源码打包位置
entry: './src/main.js',
// 配置目标位置
output: {
// path 只能写绝对路径 不能写相对路径 但是不要直接写死,需要动态获取文件位置
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// 增加.vue文件的loader
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
// 使用runtime-compiler
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
},
// 插件
plugins:[
// 版权插件
new webpack.BannerPlugin('最终版权归彼岸舞所有!'),
// index.html打包插件
new Ht