这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇

就像我们不会完全做一个项目,不用别人的轮子一样。
这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀。

有了前面的基础,这节快速切入主题。

文章目录

  1. 1. 用 vue-cli脚手架 初始化项目
  2. 2. 学习分析vue-cli的配置
    1. 2.1. 目录结构
    2. 2.2. config目录
    3. 2.3. build目录,webpack配置精华
      1. 2.3.1. webpack.base.conf.js
      2. 2.3.2. webpack.dev.conf.js
      3. 2.3.3. webpack.prod.conf.js
      4. 2.3.4. utils.js
      5. 2.3.5. dev-client.js
      6. 2.3.6. build.js
  3. 3. 一点闲话 es6 babel
  4. 4. 一点想法关于spa单页应用

用 vue-cli脚手架 初始化项目

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

install

#全局安装 vue-cli
$npm install -g vue-cli

#创建一个基于 “webpack” 模板的新项目
$ vue init webpack my-project

#安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

注意:vue init webpack my-project 这一步初始化过程中,可根据需求选择是否需要某些插件

ok,就是这么简单!

学习分析vue-cli的配置

  • 目录结构

  • config目录

    主要是index.js配置,build 和 dev各自的输入输出,以及开发环境服务的默认端口和代理配置项等
    其他三个文件顾名思义,都是方便配置切换环境用的变量。
    这种思路非常值得学习,抽离配置,合并(merge)使用。

  • build目录,webpack配置精华

    • webpack.base.conf.js

      此项配置之前已经讲解过,这里主要说明 resolve 配置项

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      resolve: {
      extensions: ['', '.js', '.vue'], //后缀名,用于模块查找
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
      jquery: path.resolve(__dirname, "./components/jquery/dist/jquery.js")
      }
      }
      // fallback: 这歌主要用于解决路径找不到问题,配置成绝对路径
       
      /**
      * [alias 这是个重点,别名,别笑这不是废话]
      * 简单说有一个人叫 莱昂纳多·迪卡普里奥(Leonardo DiCaprio)
      * 这名字真特么长,不符合我们习惯,所以给你另起了一个代号叫 小李子
      * 以后大家叫小李子,我们就会明白是叫 莱昂纳多·迪卡普里奥
      * 所以配置好上面那个之后,我们想召唤 jQuery的时候,
      * 不用写那么多,只需 require("jquery") 即可
      * 有没有瞬间觉得世界很美好呢
      */

    聪明的您可能还会发现一个问题,jquery这种东西,几乎每个页面都需要,每次都召唤require(“jquery”)有没有很烦恼。
    这里传授你 什么叫做 大召唤术 ,一次召唤,随身使用。说人话就是做成 全局变量。。。
    我们只需要在中加入一个插件即可:

    1
    2
    3
    4
    5
    6
    plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    _: "underscore"
    })
    ]

    看见没,上面想召唤什么就 加进去就好了,阳光真好啊.

    一点闲话 es6 babel

    用babel转码,切记一点,必须有转码规则配置,可写入.babelrc文件

    1
    2
    3
    4
    5
    6
    # .babelrc
    {
    "presets": ["es2015", "stage-2"],
    "plugins": ["transform-runtime"],
    "comments": false
    }

    或者写入babel-loader加载器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    loaders: [
    {
    test: /\.js$/,
    loader: 'babel',
    query: {
    presets: ['es2015']
    },
    exclude: '/(node_modules|components)/',
    include: "/"
    }
    ]

如果发现 便已完毕仍不识别es6语法,不识别import,请更改上面 include 值为 根目录 试试。

一点想法关于spa单页应用

构建单页应用,用vue作者大神的这个配置就好了,根据需求自行调整,太优秀。

webpack 教程 那些事儿04-webpack项目实战分析的更多相关文章

  1. webpack 教程 那些事儿06-gulp+webpack多页

    本篇主要讲述用gulp+webpack构建多页应用 折腾到现在,项目还必须要进行,.vue文件必须要加载,也就是webpack必须引入.时间不多了,抛弃上个方案之后,只能牺牲热加载性能,用gulp+w ...

  2. 【ASP.NET实战教程】ASP.NET实战教程大集合,各种项目实战集合

    [ASP.NET实战教程]ASP.NET实战教程大集合,各种项目实战集合,希望大家可以好好学习教程中,有的比较老了,但是一直很经典!!!!论坛中很多小伙伴说.net没有实战教程学习,所以小编连夜搜集整 ...

  3. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  4. webpack 教程 那些事儿01-webpack是什么

    文章目录 1. 为什么引入webpack? 2. webpack到底是什么? 3. webpack的工作流程理念 4. webpack的使用 4.1. install webpack 5. 分享源码d ...

  5. webpack 教程 那些事儿05-多页应用

    本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用v ...

  6. webpack 教程 那些事儿02-从零开始

    接着上篇我们有了最简单的安装了webpack的项目目录这节我们从零开始搭建一个简单的基于webpack的spa应用demo本节只说基础常用配置项,复杂后续讲解. 文章目录 1. 新建项目结构目录,如下 ...

  7. 【EF 5】结合项目实战分析EF三大工作模式之—Database First

    导读:所谓的EF的Databasefirst工作模式,是目前我们(不涉及社会领域)用的最广的一种模式,也是本次ITOO开发所采用的工作模式.本篇博客,就分析在项目中通过Database First模式 ...

  8. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  9. Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

随机推荐

  1. jQuery知识点总结(第四天)

    前三天是jQuery的基础部分,选择器学好了.才能进行下一步的操作,如果前三天没学过没学好,不要跳着学.粗俗的话叫做,步子大了,容易扯着蛋.一步一个脚印,是最好的方式. 强调一下.有问题,不要憋着不讲 ...

  2. javascript 代码可读性

    可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式.可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释 1.1.1 函数和方法 每个函数或方法都应该包含一个注释,描述其目的和 ...

  3. elk系列2之multiline模块的使用

    preface 上回说道了elk的安装以及kibana的简单搜索语法,还有logstash的input,output的语法,但是我们在使用中发现了一个问题,我们知道,elk是每一行为一个事件,像Jav ...

  4. DNS(企业级)

    构建DNS(企业级) 1.硬件选型 CPU:12C以上配置 内存:16G 网络:千兆 2.初始化系统配置 关闭 iptables service iptables stop chkconfig ipt ...

  5. gnuplot使用3

    linetype set linetype命令允许用户重定义默认的显示线的类型,该命令的选项跟"set style line"是一样的.于"set style line& ...

  6. android studio中ListView与SQLite的结合使用

    Da.java public class Db extends SQLiteOpenHelper { public Db(Context context) { super(context, " ...

  7. PHP 生成图片缩略图函数

    <?php /** * 生成缩略图函数(支持图片格式:gif.jpeg.png和bmp) * @author ruxing.li * @param string $src 源图片路径 * @pa ...

  8. centos'的yum安装php的memcache扩展

    centos'的yum安装php的memcache扩展 博客分类: linux   让php能使用memcached服务的扩展有两种:memcache 和 memcached 1. 先安装libmem ...

  9. PHP ob系列函数详解

    一. 相关函数简介:    1.Flush:刷新缓冲区的内容,输出.    函数格式:flush()    说明:这个函数经常使用,效率很高.    2.ob_start :打开输出缓冲区    函数 ...

  10. PyCharm 教程(四)显示行号

    PyCharm 教程(四)显示行号 在PyCharm 里,显示行号有两种办法: 1,临时设置.右键单击行号处,选择 Show Line Numbers. 但是这种方法,只对一个文件有效,并且,重启Py ...