六、webpack的安装和配置

  1. 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/

    要安装最新版本或特定版本,请运行以下命令之一:

    npm install --save-dev webpack
    npm install --save-dev webpack@<version>

    如果你使用 webpack 4+ 版本,你还需要安装 CLI:

    npm install --save-dev webpack-cli

    以下的 NPM 安装方式,将使 webpack 在全局环境下可用:

    npm install --global webpack

    在这里,我推荐使用全局安装,这样可以避免后面使用过程中让你意想不到的各种个问题。

  2. 接下来我们对webpack进行简单的配置:

    我们先理解四个核心概念

    • 入口(entry)
    • 输出(output)
    • loader
    • 插件(plugins)
    • 模式
    入口(entry)

    入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

    每个依赖项随即被处理,最后输出到称之为 bundles 的文件中,我们将在下一章节详细讨论这个过程。

    可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src

    看一个 entry 配置的最简单例子:

    webpack.config.js

    module.exports = {
      entry: './path/to/my/entry/file.js'
    };
    出口(output)

    output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

    webpack.config.js

    const path = require('path');
    
    module.exports = {
      entry: './path/to/my/entry/file.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
      }
    };

    我们通过 output.filenameoutput.path 属性,来告诉 webpack bundle 的名称,以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么,它是一个 Node.js 核心模块,用于操作文件路径。

    loader

    loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

    本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。

    在 webpack 的配置中 loader 有两个目标:

    1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
    2. use 属性,表示进行转换时,应该使用哪个 loader。

    webpack.config.js

    const path = require('path');
    
    const config = {
      output: {
        filename: 'my-first-webpack.bundle.js'
      },
      module: {
        rules: [
          { test: /\.txt$/, use: 'raw-loader' }
        ]
      }
    };
    
    module.exports = config;

    以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:testuse。这告诉 webpack 编译器(compiler) 如下信息:

    “嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先使用 raw-loader 转换一下。”

    插件(plugins)

    loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

    想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

    webpack.config.js

    const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
    const webpack = require('webpack'); // 用于访问内置插件
    
    const config = {
      module: {
        rules: [
          { test: /\.txt$/, use: 'raw-loader' }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
      ]
    };
    
    module.exports = config;
    模式

    通过选择 developmentproduction 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

    module.exports = {
      mode: 'production'
    };

七、本项目中的webpack.config.js的基本配置和出错情况

  1. 先来看我的基础配置(最终版):
var path = require('path')  // 引入操作路径模块
const VueLoaderPlugin = require('vue-loader/lib/plugin') //引入vue-loader
module.exports = {
    mode: 'development',
    // 输入文件
    entry: './src/main.js',
    output: {
        // 输出目录
        path: path.resolve(__dirname, 'dist'),
        // 静态目录,从这里取文件
        publicPath: '/dist/',
        // 文件名
        filename: 'index.js'
    },
    module: {
        rules: [
            //解析vue后缀文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            //用巴babel解析js文件 排除模块安装目录的文件
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                include: '/src',
                exclude:'/node_modules/'
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
              },
            {

                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件!
        new VueLoaderPlugin()
      ]
}

然后在以上配置过程中,出现了一系列的问题:

出现这个错误是因为每个 vue 包的新版本发布时,一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步,这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时,也应该匹配升级 vue-template-compiler。

你应该将 vue-loadervue-template-compiler 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户:

npm install -D vue-loader vue-template-compiler

然后在webpack.config.js中分别写入:

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module: {
    ...
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}


很明显,该错误是由element-ui引起的,解决这个问题我们只需要插入这样一段语句:

{
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader'
            }

从无到有构建vue实战项目(四)的更多相关文章

  1. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

  2. VUE实战项目-数据转换之道

    前言 公司的这个项目从去年底启动.至今经历winform版本与当前的VUE两个版本,前后经历不足3个月的时间.从纯技术角度来看,推进速度都很优异.究其原因,大抵我们都是喜欢“偷懒”的程序员,把能封装. ...

  3. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  4. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  5. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  6. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  7. vue+websocket+express+mongodb实战项目(实时聊天)

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  8. jenkins构建自由风格项目[四]

    标签(linux): jenkins 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 构建一个php项目 创建一个新的项目 选择从git获取源码 配置gitlab ...

  9. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  10. 08Vue.js快速入门-Vue综合实战项目

    8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...

随机推荐

  1. 【Python基础学习三】数字(Number)

    Python Number 数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值,将重新分配内存空间. Python 四种数值类型: 整型(Int) - 通常 ...

  2. WEB安全入门(转)

    一. 首先你得了解Web Web分为好几层,一图胜千言:事实是这样的:如果你不了解这些研究对象是不可能搞好安全研究的.这样看来,Web有八层(如果把浏览器也算进去,就九层啦,九阳神功……)!!!每层都 ...

  3. git 检出

    1 git checkout branch 检出branch分支.要完成图8-1三个步骤,更新HEAD已指向新分支 以及用branch指向的树更新暂存区和工作区 2 git checkout 显示出工 ...

  4. 多校7 HDU5818 Joint Stacks

    多校7 HDU5818 Joint Stacks 题意:n次操作.模拟栈的操作,合并的以后,每个栈里的元素以入栈顺序排列 思路:开三个栈,并且用到了merge函数 O(n)的复杂度 #include ...

  5. pom.xml报错

    错误太多打开文件后就不会显示,点开前边的选项卡就会提示错误信息,一般是jar包没加载全.

  6. JQuery 图片延迟加载并等比缩放插件

    原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...

  7. Docker学习笔记 - Docker的容器

    docker logs  [-f]  [-t]  [--tail]  容器名 -f -t --tail="all" 无参数:返回所有日志 -f 一直跟踪变化并返回 -t 带时间戳返 ...

  8. 关于Allele(等位基因)的理解

    高中学生物的时候关于遗传学的部分,记得当时的教材上为了简化处理一般将基因型定义为AA, Aa, aa.其实这种抽象的理解对应付高考是很有用的,但是实际应用中如果还这样理解那么便会产生一些疑问.之所以会 ...

  9. MongoDB 监控

    在你已经安装部署并允许MongoDB服务后,你必须要了解MongoDB的运行情况,并查看MongoDB的性能.这样在大流量得情况下可以很好的应对并保证MongoDB正常运作. MongoDB中提供了m ...

  10. my.ini的路径分隔符

    又踩了个坑,今天安装mysql,路径为F:\test\mysql于是我配置my.ini如下 [mysqld] basedir=F:\test\mysql datadir=F:\test\mysql\d ...