从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)
- 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 HtmlWebpackPlugin({ // 指定模板生成 不然没有id="app"的div 同时删除调用index.html中的 <script>应为会自动添加,所以不需要写 template: 'index.html' }), // JS压缩插件 new uglifyjsWebpackPlugin() ], // 配置DevServer devServer:{ contentBase:'./dist', inline:true } }
应为安装的是局部的,所以在package.json中添加script
{ "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来启动了
执行命令
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm run dev > simpleconfig@1.0.0 dev D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin > 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来实现
"dev": "webpack-dev-server --open"
但是现在还是存在一些问题的,比如我们在开发中并不需要对JS文件进行压缩,在构建的时候也不需要本地服务器的配置,这时我们就可以对配置文件进行抽离,形成单独的开发配置和生产配置
在项目中新增build文件夹,然后新建三个JS
base.config.js用于存放公共的配置,也就是开发和生产都需要的
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 里面存放构建生产时存放的配置
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 里面存放开发时存放的配置
module.exports = { devServer:{ contentBase:'./dist', inline:true } }
虽然这个时候三个配置文件是分离的,但是webpack并不认识三个文件,这个时候就需要一个插件了
npm install webpack-merge --save-dev
执行安装
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>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_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"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\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-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.com\vue\day1\html\4.从0开始学VUE\simpleplugin>
安装成功
修改prod.config.js
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
// 导入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对应的命令
{ "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中的文件,执行一下打包
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm run build > simpleconfig@1.0.0 build D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin > webpack --config build/prod.config.js D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\build\prod.config.js:10 module.exports = webpackMerge(baseConfig,{ ^ TypeError: webpackMerge is not a function at Object.<anonymous> (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\build\prod.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.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\convert-argv.js:97:18) at D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\convert-argv.js:104:17 at Array.forEach (<anonymous>) at module.exports (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\convert-argv.js:102:15) at D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.js:171:41 at Object.Yargs.self.parse (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\yargs\yargs.js:533:18) at Object.<anonymous> (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.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:\Users\ext.zhangyugen1\AppData\Roaming\npm-cache\_logs\2021-06-04T10_35_30_252Z-debug.log D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>
emm又报错了webpackMerge不是一个函数,估计又是版本问题,我giao
修改版本,重新npm install
执行成功
警告消失重新,打包
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm run build > simpleconfig@1.0.0 build D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin > 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.com\vue\day1\html\4.从0开始学VUE\simpleplugin>
打包成功,可以看到我们使用了prod.config.js文件
运行一下开发环境,尝试一下
D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm run dev > simpleconfig@1.0.0 dev D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin > 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
