webpack -> vue Component 从入门到放弃(二)

Foreword

上一篇简单介绍了webpack的打包功能,应该说是比较无意义的打包,对于开发人员来说,这种效率是非常低的。所以我们来点升华。

First Step

我们给第一篇例子中加个样式文件我们 style.css

body { background: yellow; }

然后修改 entry.js

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.getElementById('app').innerHTML="it works";
require("./content.js");

ps: 这里就体现loader的用处了,我们先回顾一下index.html的代码

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
         <script src="bundle.js"></script>
    </body>
</html>

在这里我们只引入webpack打包生成后的bundle.js,所有的js css 等都是通过这个文件被引入页面的,而不像平常我们引入 js 用 <script>标签 引入 css 用 link/<style>便签引入.

原理就是 首页 将 style.css 也看成是一个模块,然后用 css-loader 来读取它,再用 style-loader 把它插入到页面中。

所以我们还要再package.json安装 css-loader style-loader 依赖

$ cnpm install css-loader --save-dev
$ cnpm install style-loader --save-dev

安装成功后成功自动加入依赖信息
clipboard.png

让我们跑一下

$ webpack entry.js bundle.js 

刷新index.html后就能看到body被改为 yellow 了

如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。

将 entry.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ,(ps:我用的是webpack 2.2.1版本的,在这里它已经不允许在使用loaders 时去省略 -loader 这个后缀了,所以打包时报错,请检查你是否写成了require("!style!css!./style.css") ) 然后执行:

//为了看效果,我们可以在style.css里面把yellow换成其他颜色
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

# 有些环境下可能需要使用双引号 而且需要在感叹好前加上斜杠进行转译
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

显然,这两种使用 loader 的方式,效果是一样的。

Second Step

要是每次都需要打一堆字符串去打包,简直无法忍受,所以我们需要简化,简化。。。。

webpack.config

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

首先我们还是要先安装webpack依赖,之前的demo都是在全局的webpack下操作的,现在我们要在项目目录下安装webpack

$ cnpm install webpack --save-dev

成功在package.json加入依赖
clipboard.png

然后创建一个配置文件 webpack.config.js:

#此文件不能写注释,我这里图方便,就以注释的方式进行注解了
var webpack = require('webpack'); // 引入webpack 模块
module.exports = { //commonJs模块规则写法
  entry: './entry.js', //入口文件,这里指的是根目录下的entry.js作为入口文件
  output: {//输出接口
    path: __dirname,//项目输出的路径(__dirname为绝对路径)
    filename: 'bundle.js'//文件以bundle.js输出
  },

//定义了对模块的处理逻辑,这里可以用 loaders 定义了一系列的加载器,
以及一些正则。当需要加载的文件匹配test的正则时,
就会调用后面的 loader 对文件进行处理,这正是 webpack 强大的原因。
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

详细的其他配置信息可以去官网进行查看

同时简化 entry.js 中的 style.css 加载方式:

require('./style.css')

最后运行一下

$ webpack

可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' 执行的结果是一样的。

这篇就这样吧,感觉进度有点慢

webpack -> vue Component 从入门到放弃(四)
webpack -> vue Component 从入门到放弃(一)
webpack -> vue Component 从入门到放弃(三)
github源代码


不是前端的前端
此专栏是整理自己的知识点尽可能小白式发表,可能有很多不正确的地方,希望大家谅解,并指出错误帮助改进。

除了写bug

117 声望
15 粉丝
0 条评论
推荐阅读
webpack -> vue Component 从入门到放弃(四)
之前三篇大致介绍了webpack的用法,正如这个系列标题而言 从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合使用,所以看官要是对 vue Component不是很了解的话,先去瞅瞅吧 ...

翻滚的猿阅读 7.8k评论 8

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

除了写bug

117 声望
15 粉丝
宣传栏