webpack入坑之旅（四）扬帆起航

时间 2019-12-06

标签 webpack 之旅扬帆起航繁體版

原文原文链接

转自我的博客：原地址css

这是一系列文章，此系列全部的练习都存在了个人github仓库中vue-webpack，在本人有了新的理解与认识以后,会对文章有不定时的更正与更新。下面是目前完成的列表：html

加载图片

如今来咱们来试试加载图片，首先第一件事情，确定是安装对应的loader。它会将样式中引用到的图片转为模块来处理，使用该加载器须要先进行安装：web

npm install url-loader --save-dev

固然你也能够在package.json添加依赖，而后再npm nstall同样的效果。express

如今去咱们的项目目录中添加img文件夹，添加两张图片，一张大图jpg，一张小图png。npm

而后在咱们的webpack.config.js中添加这段：

loaders: [
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg)$/, loader: "url-loade?limit=8192" }   // 添加到这！而且会按照文件大小, 或者转化为 base64, 或者单独做为文件
    //在大小限制后能够加上&name=./[name].[ext]，会将咱们的文件生成在设定的文件夹下。
]

在html中添加：

<img src="img/logo.png" alt="">
<div id="qwe"></div>
<div id="asd"></div>

在咱们的css中添加：

/*记得写宽高。。*/
#qwe{
    background-image: url(img/logo.png);/*3.2k*/
}
#asd{
    background-image: url(img/5.jpg);
}

继续运行webpack若是正确的话，打开咱们的浏览器，就能够看到咱们正确的图片显示。

若是不正确，请运行npm install file-loader -D，再进行尝试。

如今咱们打开浏览器的调试工具，能够看到小于8K的 背景图片 图片已经被转化成了base64的编码，而大于8k的图片则并无转化（注意它的地址的变化！）。
直接使用img导入的图也并无进行base64的转化。

热加载

当项目逐渐变大，webpack 的编译时间会变长，能够经过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

下面还有一些其余经常使用的命令：

webpack #最基本的启动webpack命令
webpack -w #提供watch方法，实时进行打包更新
webpack -p #对打包后的文件进行压缩
webpack -d #提供SourceMaps，方便调试
webpack --colors #输出结果带彩色，好比：会用红色显示耗时较长的步骤
webpack --profile #输出性能数据，能够看到每一步的耗时
webpack --display-modules #默认状况下 node_modules 下的模块会被隐藏，加上这个参数能够显示这些被隐藏的模块

咱们已经把webpack的内容了解了一部分了，那么在生产环境中，我不想每一次进行改变，都去命令行中运行咱们的webpack的命令，咱们应该怎么样实现改变后自动更新呢？

webpack 为咱们提供了一个webpack --watch，他会启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被从新编译，因此监听模式的总体速度是很快的。

去运行这个命令试试吧！！

在咱们改变代码以后，命令行中能够看到直接就自动编译了，可是显然不够智能，还须要咱们手动去刷新浏览器，（其实用liveloadhack成自动刷新！）。

我反正不能忍，还要手动刷新浏览器。因此使用webpack-dev-server会是一个更好的办法！

它将在localhost:8080启动一个express静态资源web服务器，而且会以监听模式自动运行webpack，在浏览器打开http://localhost:8080/或 http://localhost:8080/webpack-dev-server/ 能够浏览项目中的页面和编译后的资源输出，而且经过一个socket.io服务实时监听它们的变化并自动刷新页面。

# 安装
npm install webpack-dev-server -g

# 运行
webpack-dev-server

咱们来试试使用vue能配合webpack能不能实现自动刷新。(有关vuejs的知识，你们能够能够先自行上官网查看，我在接下来可能也会一步一步的把vue的例子所有敲一遍，再放到github上来让点评)

首先运行npm install vue -save将vue添加到咱们的项目依赖中去。

首先在咱们的entry.js这个入口文件中进行添加：

// import Vue form ("vue") //若是你安装了babel-loader的话，能够直接使用ES6的语法
var Vue =require("vue");
    new Vue({
        el: "body",
        data: {
            message: "hello vue.js"
        }
    });

一样在index.html中添加{{ meassge }}来响应vue的数据绑定。

运行webpack-dev-server。去浏览器查看试试效果吧！任意改变message中的值，能够看到浏览器会自动刷新。而且将改变的值展现在眼前。（有可能只在http://localhost:8080/webpack-dev-server/才会自动刷新）

这里其实并无彻底对，不够全面，可能只能响应css的改变。将在下一篇继续调整该配置

自动刷新都配好了。下面咱们就来试试怎么加载vue的文件，来实现单文件组件！