webpack -> vue Component 从入门到放弃（二）

xiaochao 发布于2019-08-01 16:23 / 995人阅读

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码

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的代码

在这里我们只引入webpack打包生成后的bundle.js，所有的js css 等都是通过这个文件被引入页面的，而不像平常我们引入 js 用

让我们跑一下

$ 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加入依赖

然后创建一个配置文件 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源代码

云服务器 GPU云服务器 spark从入门到前端从入门到精通云计算从入门到精通 html从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50482.html

wepback入门到放弃

摘要：四配置配置规则放在的数组里，每个是一个对象，是正则匹配，匹配文件后缀名，是要用是数组是所需要的是要加载哪些文件，是忽略掉哪些文件。实现解析，用会在写入在文件顶端导入中加入插件。最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化，不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。...

blastz 2019-08-23 10:23 评论0 收藏0
Vue.js 服务端渲染业务入门实践

摘要：说起，其实早在出现之前，网页就是在服务端渲染的。没有涉及流式渲染组件缓存对的服务端渲染有更深一步的认识，实际在生产环境中的应用可能还需要考虑很多因素。选择的服务端渲染方案，是情理之中的选择，不是对新技术的盲目追捧，而是一切为了需要。作者：威威（沪江前端开发工程师）本文原创，转载请注明作者及出处。背景最近，产品同学一如往常笑嘻嘻的递来需求文档，纵使内心万般拒绝，身体倒是很诚实...

miya 2019-08-21 16:18 评论0 收藏0
Vuex从入门到放弃（webpack自动导入模块命名空间辅助函数）

摘要：从入门到放弃自动导入模块命名空间辅助函数什么是什么是状态管理，驱动应用的数据源，以声明方式将映射到视图，响应在上的用户输入导致的状态变化。最后重点来了外包在职萌新求内推位置广州 Vuex从入门到放弃（webpack自动导入模块命名空间辅助函数） 1.什么是vuex 1.1 什么是状态管理 state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actio...

blankyao 2019-08-26 18:36 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

william 2019-08-20 18:28 评论0 收藏0