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

时间 2019-11-21

标签 webpack vue component 入门放弃繁體版

原文原文链接

Forewordcss

上一篇简单介绍了webpack的打包功能，应该说是比较无心义的打包，对于开发人员来讲，这种效率是很是低的。因此咱们来点升华。html

First Stepvue

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

body { background: yellow; }

而后修改 entry.jswebpack

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

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

<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>便签引入.github

原理就是首页将 style.css 也当作是一个模块，而后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。web

因此咱们还要再package.json安装 css-loader style-loader 依赖npm

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

安装成功后成功自动加入依赖信息
json

让咱们跑一下

$ 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源代码