从0开始Vue.js 和 Webpack 4 [2]

核心目标

  • 使用webpack-dev-server热加载模块
  • 使用eslint文件瘦身
  • 使用stylus进行CSS预处理
  • 使用@ vue / test-utils和Jest进行测试

webpack其他服务

安装webpack-dev-server自动加载修改内容

npm install --save-dev webpack-dev-server

package.json加入入口命令

./package.json

"dev": "webpack-dev-server --config build/webpack.config.dev.js"

但是此时如果更改App.vue文件内容,页面并不会实时改变。

原因:当配置index.html时,指定了javascript的具体路径,为了使热模块重新加载工作,需要允许注入此路径,这样就可以实时更新html了。

./index.html

删除<script src="dist/main.js" type="text/javascript"></script>

安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

./build/webpack.config.dev.js

'use strict'
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
//引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'development',
  
  entry: [
    './src/app.js'
  ],
  //热加载配置
  devServer: {
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        //文件注入位置
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]
}

vue模块测试

./components/HelloComponent.vue

<template>
  <h1>Hello {{ name }}!</h1>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>
<style >
h1{color:red}
</style>

./src/App.vue

<template>
  <div class="full-width center-content">
    <hello-component name="World" />
  </div>
</template>
<script>
import HelloComponent from './components/HelloComponent.vue'
export default {
  components: {
    HelloComponent
  }
}
</script>

安装Babel,将ES6代码转换为ES5,兼容所有浏览器

npm install --save-dev babel-core babel-loader babel-preset-env

./build/webpack.config.dev.js

{
  test: /\.js$/,
  use: 'babel-loader'
}

./.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

原文链接:https://itnext.io/vue-js-and-webpack-4-from-scratch-part-2-5038cc9deffb

原文作者:Daniel Cook

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native应用部署/热更新-CodePush最新集成总结(新)

React Native应用部署/热更新-CodePush最新集成总结(新) ---- 更新说明: 此次博文更新适配了最新版的CodePush v1.17....

7596
来自专栏分布式系统和大数据处理

Webpack入门

Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

1562
来自专栏杂烩

Eclipse下Hadoop的MapReduce开发之eclipse配置

    首先下载Eclipse LUNA,这里注意如果你是想在远程电脑上使用eclipse,也就是hadoop安装在linux下,而你想在win系列的电脑上连接...

3211
来自专栏张善友的专栏

反向代理(Reverse Proxy)及 IIS 7 应用请求路由模块

反向代理(Reverse Proxy)方式是指以代理服务器来接受外部的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给外部的请求连接...

3458
来自专栏finleyMa

react学习系列1 修改create-react-app配置支持stylus

注:由于前端更新非常快,写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档。 create-react-ap...

1922
来自专栏挖坑填坑

ionic 中 cordova-plugin-inappbrowser组件的使用

在上一篇文章中(使用Ionic3创建原生app系统入门)介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。

1692
来自专栏糊一笑

webpack入门指南

1. 导语 github仓库 https://github.com/Rynxiao/webpack-test 1.1 什么叫做webpack webpack ...

2214
来自专栏禅林阆苑

Webpack学习总结 【原创】

Webpack学习总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/...

43413
来自专栏web

记一次webpack打包优化

2366
来自专栏csxiaoyao

Webpack学习总结

4876

扫码关注云+社区

领取腾讯云代金券