- webpack提供了一个可选的本地开发服务器,这个本地服务器是基于Nodejs搭建的,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改代码后的结果
- 不过他是一个单独的模块,在webpack中使用需要安装
npm install --save-dev webpack-dev-server@2.9.3- devserver也是作为webpack中的一个选项,选项本身可以设置如下属性
- contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里需要填写./dist,让他为我门编译过后的文件提供服务
- port:端口
- inline:页面实时刷新
- historyApiFallback:在SPA页面中,依赖H5的history模式
执行命令安装
代码语言：javascript复制D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>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_moduleswebpack-dev-servernode_moduleschokidarnode_modulesfsevents):
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_modulesfsevents):
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_moduleswatchpack-chokidar2node_modulesfsevents):
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.comvueday1html4.从0开始学VUEsimpleplugin>安装成功,修改webpack.config.js
代码语言：javascript复制// 需要从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 HtmlWebpackPlugin({
// 指定模板生成 不然没有id="app"的div 同时删除调用index.html中的 <script>应为会自动添加,所以不需要写
template: 'index.html'
}),
// JS压缩插件
new uglifyjsWebpackPlugin()
],
// 配置DevServer
devServer:{
contentBase:'./dist',
inline:true
}
}应为安装的是局部的,所以在package.json中添加script
代码语言：javascript复制{
"name": "simpleconfig",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.13",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"vue": "^2.6.13"
}
}dev对应的就是我们服务启动的命令,配置完成后我们就可以通过npm run dev来启动了
执行命令
代码语言：javascript复制D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>npm run dev
> simpleconfig@1.0.0 dev D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin
> webpack-dev-server
# 默认运行在8080端口
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: 8cc676bfc407cf894680
Version: webpack 3.6.0
Time: 5054ms
Asset Size Chunks Chunk Names
bundle.js 278 kB 0 [emitted] [big] main
index.html 218 bytes [emitted]
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/process/browser.js 5.42 kB {0} [built]
[3] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/js/App.vue 166 bytes {0} [built]
[4] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
[5] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
[6] ./node_modules/url/url.js 23.3 kB {0} [built]
[13] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[15] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
[16] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[18] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[24] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[26] (webpack)/hot/emitter.js 77 bytes {0} [built]
[28] ./src/main.js 534 bytes {0} [built]
[29] ./node_modules/vue/dist/vue.esm.js 328 kB {0} [built]
[32] ./src/js/App.vue 1.83 kB {0} [built]
25 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 375 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 544 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.启动成功,默认运行在8080端口,可以通过http://localhost:8080/访问
运行结果
如果想要在启动成功后自动打开浏览器访问页面的话可以添加参数 --open来实现
代码语言：javascript复制"dev": "webpack-dev-server --open"但是现在还是存在一些问题的,比如我们在开发中并不需要对JS文件进行压缩,在构建的时候也不需要本地服务器的配置,这时我们就可以对配置文件进行抽离,形成单独的开发配置和生产配置
在项目中新增build文件夹,然后新建三个JS
base.config.js用于存放公共的配置,也就是开发和生产都需要的
代码语言：javascript复制const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
// 应为修改了文件路径所以需要找到上一级路径,不然打包后就是在build/dist中的
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']
}
}
},
{
test: /.vue$/,
use:['vue-loader']
}
]
},
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
}prod.config.js 里面存放构建生产时存放的配置
代码语言：javascript复制const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins:[
new webpack.BannerPlugin('最终版权归彼岸舞所有!'),
new HtmlWebpackPlugin({
template: 'index.html'
}),
new uglifyjsWebpackPlugin()
]
}dev.config.js 里面存放开发时存放的配置
代码语言：javascript复制module.exports = {
devServer:{
contentBase:'./dist',
inline:true
}
}虽然这个时候三个配置文件是分离的,但是webpack并不认识三个文件,这个时候就需要一个插件了
代码语言：javascript复制npm install webpack-merge --save-dev执行安装
代码语言：javascript复制D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>npm install webpack-merge --save-dev
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_modulesfsevents):
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_moduleswatchpack-chokidar2node_modulesfsevents):
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 optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_moduleswebpack-dev-servernode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
webpack-merge@5.7.3
added 6 packages from 11 contributors and audited 874 packages in 6.514s
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.comvueday1html4.从0开始学VUEsimpleplugin>安装成功
修改prod.config.js
代码语言：javascript复制const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// 导入base.config.js
const baseConfig = require("./base.config")
// 导入合并插件
const webpackMerge = require('webpack-merge')
// 合并导出文件
module.exports = webpackMerge(baseConfig,{
plugins:[
new webpack.BannerPlugin('最终版权归彼岸舞所有!'),
new HtmlWebpackPlugin({
template: 'index.html'
}),
new uglifyjsWebpackPlugin()
]
})修改dev.config.js
代码语言：javascript复制// 导入base.config.js
const baseConfig = require("./base.config")
// 导入合并插件
const webpackMerge = require('webpack-merge')
// 合并导出文件
module.exports = webpackMerge(baseConfig,{
devServer:{
contentBase:'./dist',
inline:true
}
})现在就可以删除外面的webpack.config.js了
修改package.json 应为我们的配置文件已经变更所以需要修改文件中的script对应的命令
代码语言：javascript复制{
"name": "simpleconfig",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config build/prod.config.js",
"dev": "webpack-dev-server --open --config build/dev.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.13",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"vue": "^2.6.13"
}
}可以看到我们在后面指定了开发服务器和打包的配置文件
先删除dist中的文件,执行一下打包
代码语言：javascript复制D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>npm run build
> simpleconfig@1.0.0 build D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin
> webpack --config build/prod.config.js
D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginbuildprod.config.js:10
module.exports = webpackMerge(baseConfig,{
^
TypeError: webpackMerge is not a function
at Object.<anonymous> (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginbuildprod.config.js:10:18)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at requireConfig (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinconvert-argv.js:97:18)
at D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinconvert-argv.js:104:17
at Array.forEach (<anonymous>)
at module.exports (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinconvert-argv.js:102:15)
at D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinwebpack.js:171:41
at Object.Yargs.self.parse (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_modulesyargsyargs.js:533:18)
at Object.<anonymous> (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinwebpack.js:152:7)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! simpleconfig@1.0.0 build: `webpack --config build/prod.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the simpleconfig@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:Usersext.zhangyugen1AppDataRoamingnpm-cache_logs2021-06-04T10_35_30_252Z-debug.log
D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>emm又报错了webpackMerge不是一个函数,估计又是版本问题,我giao
修改版本,重新npm install
执行成功
警告消失重新,打包
代码语言：javascript复制D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>npm run build
> simpleconfig@1.0.0 build D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin
> webpack --config build/prod.config.js
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: bd482771cd069947084b
Version: webpack 3.6.0
Time: 3140ms
Asset Size Chunks Chunk Names
bundle.js 132 kB 0 [emitted] main
index.html 218 bytes [emitted]
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/js/App.vue 166 bytes {0} [built]
[3] ./src/main.js 534 bytes {0} [built]
[7] ./src/js/App.vue 1.83 kB {0} [built]
[8] ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3ea74058","scoped":true,"hasInlineConfi
g":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/js/App.vue 1.58 kB {0} [built]
[9] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3ea74058","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loa
der/lib/selector.js?type=styles&index=0!./src/js/App.vue 286 bytes {0} [built]
[14] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-3ea74058","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0
!./src/js/App.vue 497 bytes {0} [built]
8 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 375 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
1 hidden module
D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>打包成功,可以看到我们使用了prod.config.js文件
运行一下开发环境,尝试一下
代码语言：javascript复制D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>npm run dev
> simpleconfig@1.0.0 dev D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin
> webpack-dev-server --open --config build/dev.config.js
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
webpack: wait until bundle finished: /
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: 2f2aac7a4952e288cc5b
Version: webpack 3.6.0
Time: 1351ms
Asset Size Chunks Chunk Names
bundle.js 696 kB 0 [emitted] [big] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/process/browser.js 5.42 kB {0} [built]
[3] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/js/App.vue 166 bytes {0} [built]
[4] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
[5] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
[6] ./node_modules/url/url.js 23.3 kB {0} [built]
[13] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[15] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
[16] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[18] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[24] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[26] (webpack)/hot/emitter.js 77 bytes {0} [built]
[28] ./src/main.js 534 bytes {0} [built]
[29] ./node_modules/vue/dist/vue.esm.js 328 kB {0} [built]
[32] ./src/js/App.vue 1.83 kB {0} [built]
25 hidden modules
webpack: Compiled successfully.运行成功,并且使用的是dev.config.js配置文件
啊啊啊啊啊啊~webpack中与写完了,下一章从开始写Vue-cli
作者：彼岸舞
时间：2021 6 7
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
