Webpack四、iView、Vue开发环境的搭建

时间 2019-11-10 标签 webpack iview vue 开发环境搭建

导读

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

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

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

详细内容

建立一个文件夹
进入该文件并初始化：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"

写在最后

在此记录了项目开发环境的初步搭建，因为项目写起来以后，书写的地方来回切换不利于记录，因此记录的文本比较混乱，并再也不继续记录开发的详细步骤，如果文中有什么错误，还望你们指出。 node