【webpack】webpack开发单页面应用（spa）

最新推荐文章于 2021-06-16 03:52:24 发布

巴拉拉L

最新推荐文章于 2021-06-16 03:52:24 发布

阅读量356

点赞数

分类专栏： webpack 文章标签： spa webpack vue

本文链接：https://blog.csdn.net/weixin_39602178/article/details/88855062

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、前言

前面【webpack】webpack4基本的构建过程和【webpack】webpack之管理资源及管理输出作了一些基本的配置，接下来我们就用vue来开发一个spa应用。

二、准备

安装并配置babel

（1）安装

npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loaderet-env babel-loader

注：-D 即 --save-dev ； -S 即 --save

（2）配置

webpack.config.js文件下：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/, // 忽略掉该文件下的js
      },
      ...
     ]
}

{
    "presets": ["@babel/preset-env"], 
    "plugins": ["@babel/plugin-transform-runtime"] 
}

安装与配置vue相关模块

（1）安装vue、vue-loader、vue-template-compiler以及vue-style-loader

npm i -S vue
npm i -D vue-loader vue-template-compiler vue-style-loader

（2）配置 webpack.config.js文件下：

...
const {VueLoaderPlugin} = require('vue-loader');

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      ...
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    ...
  ]
};

三、开发

src目录下新建assets目录和views目录，分别用来存放项目用到的资源文件以及页面文件。
assets放入一张图片bgImg.jpg
views目录下新建first.vue文件：

<template>
    <div>
        <i class="logo"></i>
    </div>
</template>

<script>
export default {
    name: 'myViews'
}
</script>

<style scoped>
    .logo {
        display: block;
        margin: auto;
        width: 400px;
        height: 400px;
        background: url(../assets/bgImg.jpg);
    }
</style>

<template>
  <div id="app">
    <my-views></my-views>
  </div>
</template>

<script>
import myViews from "./views/first";

export default {
  name: "App",
  components: {
    myViews
  }
};
</script>

index.js文件下：

import Vue from 'vue';

import App from './App';

new Vue({
    el: '#app',
    render: h => h(App)
})

6.根目录下新建index.html文件，建一个div入口，将vue挂载到上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack4搭一个SPA应用</title>
</head>
<body>
    <div id="app">
        <p>Hello World</p>
    </div>
</body>
</html>

打开webpack.config.js文件，修改plugins：

plugins: [
	new HtmlWebPackPlugin({
      filename: 'index.html',   //文件名
      template: 'index.html'    //模板文件
    }),
    ...
]

四、运行

npm run start，打开localhost:8080，出现图片则运行成功。

五、插件

progress-bar-webpack-plugin（编译进度条），编译过程中，可以看到编译的进度。

npm i -D progress-bar-webpack-plugin

安装完之后，需要在webpack.config.js中作出配置：

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
module.exports = {
	plugins: [
		...,
		new ProgressBarPlugin()
	]
}

完成之后，执行npm run build可以看到有进度显示。

巴拉拉L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【webpack】webpack开发单页面应用（spa）

一、前言前面【webpack】webpack4基本的构建过程和【webpack】webpack之管理资源及管理输出作了一些基本的配置，接下来我们就用vue来开发一个spa应用。二、准备安装并配置babel（1）安装npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loaderet...
复制链接

扫一扫