工具 常规操作

webpack 从零开始搭建 Vue 前端开发环境

2019-01-10  本文已影响0人  吴佳浩

Vue和webpack俨然成为前端市场的主导 但是很多来我这里面试的小伙伴依然不知道怎么去搭建vue的开发环境 为此深感惋惜 很多人都在一味的图快只做唯命是从的代码搬运工 ，今天给大家一起学习的是webpack+Vue+mint-ui / element的Vue基础架构搭建

看完之后再看看我的webpack4.x是怎么玩的吧 如受益 请留言

VUE

概述

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)

webpack 是一个模块化方案（预编译）

webpack获取具有依赖关系的模块，并生成表示这些模块的静态资源

webpack 与 模块化 

模块化方案: webpack 和 requirejs（通过编写代码的方式将前端的功能，划分成独立的模块）

补充：browserify 是与 webpack 相似的模块化打包工具

webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)

requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )

webpack起源

webpack与模块

安装 webpack

webpack 的基本使用

命令行方式演示 - demo：隔行变色


/*
 src/js/index.js
*/
// 1 导入 jQuery
import $ from 'jquery'
// 2 获取页面中的li元素
const $lis = $('#ulList').find('li')
// 3 隔行变色
// jQuery中的 filter() 方法用来过滤jquery对象
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')

配置文件方式（推荐）

/*
 webpack.config.js
 运行命令：webpack
 entry 入口的配置说明：
 https://doc.webpack-china.org/concepts/entry-points
*/
var path = require('path')
module.exports = {
  // 入口文件
 entry: path.join(__dirname, 'src/js/main.js'),
  // 出口文件
 output: {
               path: path.join(__dirname, './dist'),  // 输出文件的路径
              filename: 'bundle.js'  // 输出文件的名称
       }
}

webpack-dev-server


"scripts": {
  "dev": "webpack-dev-server"
}

使用说明

配置说明 - CLI配置


/* package.json */
/* 运行命令：npm run dev */
{
  "scripts": {
                 "dev": "webpack-dev-server --contentBase ./src --open --port 8888 --hot"
              }
}

配置说明 - webpack.config.js

const webpack = require('webpack')
devServer: {
  // 服务器的根目录 Tell the server where to serve content from
  // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
  contentBase: path.join(__dirname, './'),
  // 自动打开浏览器
  open: true,
  // 端口号
 port: 8888,
  // --------------- 1 热更新 -----------------
 hot: true
},
plugins: [
  // ---------------- 2 启用热更新cha件 ----------------
 new webpack.HotModuleReplacementPlugin()
]

## html-webpack-plugin cha件


/* webpack.config.js */

const htmlWebpackPlugin = require('html-webpack-plugin')

// ...

plugins: [

 new htmlWebpackPlugin({

  // 模板页面路径

 template: path.join(__dirname, './index.html'),

  // 在内存中生成页面路径，默认值为：index.html，可省略

  // filename: 'index.html'

 })

]

Loaders （加载器）

webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.

CSS 打包

使用webpack打包CSS


/* index.js */
// 导入 css 文件
import './css/app.css'

/* webpack.config.js */
// 配置各种资源文件的loader加载器
module: {
  // 配置匹配规则
 rules: [
  // test 用来配置匹配文件规则（正则）
  // use 是一个数组，按照从后往前的顺序执行加载
       {test: /\.css$/, use: ['style-loader', 'css-loader']},
       ]
}

使用webpack打包sass文件


/* webpack.config.js */

// 参考：https://webpack.js.org/loaders/sass-loader/#examples

// "style-loader" ：creates style nodes from JS strings 创建style标签

// "css-loader" ：translates CSS into CommonJS 将css转化为CommonJS代码

// "sass-loader"  ：compiles Sass to CSS 将Sass编译为css

module:{

 rules:[

 {test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']},

 ]

}

图片和字体打包


/* webpack.config.js */

module: {

 rules:[

  // 打包 图片文件

 { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },

  // 打包 字体文件

 { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }

 ]

}

图片打包细节


/* webpack.config.js */

module: {

    rules: [
  // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
           {
               test: /\.(jpg|png|gif|jpeg)$/,
               use: [
                        {
                          loader: 'url-loader',
                         options: {
                                       limit: 8192
                                     }
                       }
                     ]
           }
       ]
}

字体文件打包说明

babel

Babel is a JavaScript compiler. Use next generation JavaScript, today.

基本使用（两步）


/* webpack.config.js */
module: {
 rules: [
        // exclude 排除，不需要编译的目录，提高编译速度
       {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
     ]
}


/* .babelrc */
// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和cha件配置
{
  "presets": ["env"]
}

babel 的说明

babel的作用

babel-preset-


Stage 0 is "i've got a crazy idea",

stage 1 is "this idea might not be stupid",

stage 2 is "let's use polyfills and transpilers to play with it",

stage 3 is "let's let browsers implement it and see how it goes",

stage 4 is "now it's javascript".

transform-runtime


/*

 transform-runtime 的使用步骤：

 1 在 .bablerc 中，添加如下配置即可

*/

"plugins": [

  "transform-runtime"

]

总结


babel-core babel核心包

babel-loader 用来解析js文件

babel-preset-* 新ES语法的解析和转换

transform-runtime 兼容旧浏览器，到达支持新API目的

vue 单文件组件 


<!-- App.vue 示例代码： -->

<template>
     <div>
         <h1>VUE 单文件组件示例 -- App.vue</h1>
         <p>这是 模板内容</p>
     </div>
</template>
<script>
 // 组件中的逻辑代码
 export default {}
</script>
<style>
/* 组件样式 */
    h1 {
         color: red;
      }
</style>



// webpack.config.js 配置：

module: {
 rules: [
               {
                   test: /\.vue$/,
                   loader: 'vue-loader'
               }
         ]
}

使用单文件组件

/* main.js */
import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'
const vm = new Vue({
       el: '#app',
        // 通过 render 方法，渲染App组件
       render: c => c(App)
})

单文件组件使用步骤

单文件组件+路由


import Vue from 'vue'

import App from './App.vue'

// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'
// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用cha件 **
Vue.use(VueRouter)
// 3 创建路由对象
const router = new VueRouter({
       routes: [
                      { path: '/home', component: Home },
                      {path: '/login', component: Login }
                   ]
})
// ------------- vue路由配置 结束 --------------
const vm = new Vue({
     el: '#app',
     render: c => c(App),
// 4 挂载到 vue 实例中
      router

})

Mint-UI

快速开始


// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册cha件
Vue.use(MintUI)

ElementUI


{
  "presets": [
       ["es2015", { "modules": false }], "stage-0"
   ],
  "plugins": [
           ["component", [
                          {
                                   "libraryName": "mint-ui",
                                   "style": true
                           },
                           {
                                     "libraryName": "element-ui",
                                      "styleLibraryName": "theme-default"
                           }
                         ]
            ]
         ]
}

vue 的脚手架 - vue-cli 


vue脚手架的使用步骤:

1 全局安装 npm i -g vue-cli

2 通过vue命令初始化一个带有webpack模板的项目结构: vue init webpack my-project

我们使用脚手架构建vue项目的时候, 只需要修改 src目录  中的内容即可!!!

拿到项目, 第一件事就是: npm i 安装项目中使用的模块

让项目跑起来: npm run dev / npm start

如果看完以上的内容并且可以搭建出完整的前端架构 可以运行打包，那么继续努力来看看最新webpack4吧

webpack 4.X 使用 


使用上的变化：

1 需要单独安装 webpack-cli 才能使用 webpack命令

2 使用webpack命令需要指定模式（development 或者 production）

3 默认的入口为：./src 默认出口为：./dist

4  可以修改入口文件路径，也可指定出口路径

5  打包变得更快更灵活

`·

上一篇 下一篇

猜你喜欢

热点阅读