Webpack4、iView、Vue开发环境的搭建

最新推荐文章于 2023-05-11 15:20:52 发布

weixin_34129696

最新推荐文章于 2023-05-11 15:20:52 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript json ViewUI

原文链接：http://www.cnblogs.com/anani/p/9255816.html

本文介绍如何使用Yarn和Webpack搭建Vue项目的开发环境，包括安装必要的依赖、配置Webpack及构建流程。

导读

项目使用了 yarn ，一个快速、可靠、安全的依赖管理工具。yarn 是一个类似于npm的包管理工具，它是由 facebook 推出并开源，它在速度，离线模式，版本控制的方面具有独到的优势。此项目以此为基础，写一个购物商城的单页面应用，下面记录了项目开始前开发环境的简单搭建过程。

更多信息和项目基础搭建请点击查看 webpack-iview-vue。

查看最终的效果请点击查看 View online。喜欢就给个 star 吧?

详细内容

创建一个文件夹
进入该文件并初始化：yarn init
安装webpack和webpack-cli：yarn add webpack webpack-cli -D
安装vue：yarn add vue
安装：yarn add vue-loader less-loader postcss-loader css-loader style-loader url-loader file-loader html-webpack-plugin babel-loader babel-core babel-preset-env webpack-dev-server -D
升级upgrade vue-template-compiler到和vue一致的版本（非必须）：yarn upgrade vue-template-compiler@^2.5.16 -D

在根目录下创建 index.html 文件：

<!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>商城</title>
  </head>
  <body>
    <!-- 对应 main.js 中的挂载目标 -->
    <div id="app"></div>
  </body>
</html>

根路径下创建文件夹src（放置网页基础文件，并在其中创建文件app.vue：

<template>
  <div class="textStyle">{{ textData }}</div>
</template>

<script>
export default {
  data() {
    return {
      textData: 'Hello world'
    }
  }
}
</script>

<style>
.textStyle {
  background-color: aquamarine;
}
</style>

在src文件夹下创建入口文件main.js：

import Vue from 'vue';
import App from './app.vue';
new Vue({ // 创建 vue 实例
  el: '#app', // 提供一个在页面上已经存在的 DOM 元素作为 Vue 实例挂载目标
  render: (h) => h(App) // 声明了 html 中的内容
})

根目录下创建build文件夹(放置配置文件，并在其下创建webpack.config.js文件：

const path = require('path'); // node.js 中的基本包，用于处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: path.join(__dirname,'../src/main.js'), // path.jion()将两个参数代表的路径相加组合起来，__dirname代表当前文件所在目录
  output: {
    filename: 'bundle.js', //输出文件的文件名
    path: path.join(__dirname,'../dist') // 输出文件所在目录
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.css$/,
        use: [
          'style-loader', // 为 css 创建 style 标签并置入其中插入页面
          'css-loader', // 处理 css
          'postcss-loader', // 浏览器兼容问题
        ]
      },
      {
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader' // loader 由下往上依次开始处理
        ]
      },
      {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: { // 配置参数
              limit: 1024 // 比较标准，小于标准的图片转换为 base64 代码
            }
          }
        ]
      }
    ]
  },
  plugins: [
  // Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
  new VueLoaderPlugin()
  ]
}

在package.json添加以下内容：

"dev": "webpack --config build/webpack.config.js --mode development",
"build": "webpack --config build/webpack.config.js --mode production"
//webpack 用于执行webpack默认位置默认名称的配置文件webpack.config.js，其后跟的参数 --config 用于对修改名称或位置后的配置文件的运行
//--mode 后指定模式，development模式下的文件不压缩

在根目录增加文件postcss.config.js：

module.exports = { 
  plugins: { 
    'autoprefixer': {browsers: 'last 5 version'} 
  } 
}

html-webpack-plugin：

// 在webpack.config.js下引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');
并在其plugins下增加：
new HTMLWebpackPlugin({ //创建 .html 并自动引入打包后的文件
  template: 'index.html', // 参照最初创建的 .html 来生成 .html
  inject: true
})

支持ES6:

// 并在webpack.config.js里配置
{
  text: /\.js$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['env']
      }
    }
  ]
}

在webpack.config.js中与entry同级处设置：devtool: 'cheap-module-eval-source-map',
将 webpack.config.js 重新命名为 webpack.base.config.js

修改webpack.base.config.js如下：

 "dev": "webpack-dev-server --base ./dist --open --inline --hot --compress --config build/webpack.base.config.js --mode development",
"build": "webpack --config build/webpack.base.config.js --mode production"