前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)

从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)

作者头像
彼岸舞
发布2021-06-07 17:40:32
2.3K0
发布2021-06-07 17:40:32
举报
  • webpack提供了一个可选的本地开发服务器,这个本地服务器是基于Nodejs搭建的,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改代码后的结果
  • 不过他是一个单独的模块,在webpack中使用需要安装
代码语言:javascript
复制
npm install --save-dev webpack-dev-server@2.9.3
  • devserver也是作为webpack中的一个选项,选项本身可以设置如下属性
    • contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里需要填写./dist,让他为我门编译过后的文件提供服务
    • port:端口
    • inline:页面实时刷新
    • historyApiFallback:在SPA页面中,依赖H5的history模式

执行命令安装

代码语言:javascript
复制
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

代码语言: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.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来实现

代码语言: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.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

代码语言: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.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

执行成功

警告消失重新,打包

代码语言:javascript
复制
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文件

运行一下开发环境,尝试一下

代码语言:javascript
复制
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

作者:彼岸舞

时间:2021\06\07

内容关于:VUE

本文属于作者原创,未经允许,禁止转发

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-06-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com