webpack 教程 那些事儿04-webpack项目实战分析

时间：2021-03-04 05:14:12

这节主要讲解真正项目用用到的 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 这一步初始化过程中，可根据需求选择是否需要某些插件
webpack 教程 那些事儿04-webpack项目实战分析
ok，就是这么简单！

学习分析vue-cli的配置

  • 目录结构

    webpack 教程 那些事儿04-webpack项目实战分析

  • 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作者大神的这个配置就好了，根据需求自行调整，太优秀。

相关文章