WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）

转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：http://blog.csdn.net/pcaxb/article/details/53393997
WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）
WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）http://blog.csdn.net/pcaxb/article/details/53390151详细介绍WebPack的安装-使用-Loader，WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）http://blog.csdn.net/pcaxb/article/details/53393997详细介绍配置-插件-环境-排错，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）http://blog.csdn.net/pcaxb/article/details/53466261详细介绍WebPack的配置和加载器，涉及到使用过程中的一些细节和技巧，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）http://blog.csdn.net/pcaxb/article/details/53515234详细介绍WebPack的插件、命令和package的配置， 涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。
4.配置文件
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 

webpack.config.js

 文件，这个文件是一个
node.js 模块，返回一个 json 格式的配置信息对象，或者通过 

--config

 选项来指定配置文件。
继续我们的案例，在根目录安装图片的加载器，执行以下命令：

npm install url-loader --save-dev

修改上个项目中的

package.json

 的scripts源码如下：

{
"name": "react-webpack-master",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.26.0",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}

如果使用的是别人的项目，别人的项目中如果没有给出node_modules的话，你可以使用npm install安装，这里深入的安装说明，在WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）中有。

接着上一个项目在根目录创建一个配置文件 

webpack.config.js

:

let webpack = require('webpack');

module.exports = {
entry:['./app/entry.js'],
output:{
path:'./build',
filename:'bundle.js'
},
devServer: {//设置开发者工具的端口号
inline: true,
port: 8181
},
module:{
loaders:[
{
test:/\.css$/,
loader:'style!css'
},
{   test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader?limit=8192'
}
/*{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader?limit=1000000&name=img/[name].[ext]'
}*/
]
},
plugins:[
new webpack.BannerPlugin('Created by panca on 16/11/25. QQ:643691522')
]
}

现在直接使用webpack或者是npm run build就可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 

webpack
entry.js bundle.js --module-bind 'css=style!css'

 执行的结果是一样的。

修改entry.js如下：

require("./style.css");
document.write('WebPack测试<br/>');
document.write(require('./module.js')); // 添加模块
//增加图片模块
const img = document.createElement('img');
img.style.cssText = 'width: 100; height: 100;';
img.src = require('./images/account_icon_01.png');
document.body.appendChild(img);

重新编译打包，刷新页面，就可以如下效果了



这里只是简单的配置，更多关于webpack.config.js的配置将在WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）中介绍。

5.插件

插件可以完成更多loader不能完成的功能，插件的使用一般是在webpack的配置信息plugins选项中指定。Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。接下来，我们利用一个最简单的BannerPlugin内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

在webpack.config.js配置中已经已经增加了

plugins:[
new webpack.BannerPlugin('Created by panca on 16/11/25. QQ:643691522')
]

重新编译打包，就可以看到bundle.js中多了以下注释


这里只是简单的配置，更多插件将在WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）中介绍。

6.开发环境
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors --watch

当然，使用 

webpack-dev-server

 开发服务是一个更好的选择。它将在
localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个
socket.io 服务实时监听它们的变化并自动刷新页面。
继续我们的案例，在根目录安装WebPack的开发工具，执行以下命令：

npm install webpack-dev-server --save-dev

安装完成之后启动WebPack开发工具，执行以下命令

运行webpack-dev-server或者npm run dev

如果执行命令之后报如下错误的话，说明你的端口号被占用了，需要修改端口号

Error: listen EADDRINUSE 127.0.0.1:8080

在webpack.config.js文件中增加devServer，上面的配置文件中已经体现了。如果还是出现如下类似错误，
Error: Cannot find module 'file-loader'

意思是没有找到某个转换器，在更目录中执行命令npm install file-loader --save-dev安装某个转换器就可以了，执行上面启动WebPack开发工具的命令，在浏览器打开 http://localhost:8181/ 或 http://localhost:8181/webpack-dev-server/ 

就可以了。

如果出现如下界面，点击build或者谷歌浏览器的建立就可以了



当然这样处理肯定是不行的，我们要直接访问。造成这种原因是目录不对，我们可以直接更改目录，或者是修改我们的命令。直接更改目录是把build文件夹中的内容放到根目录，这样就OK了。或者是修改我们的package.json中的scripts中的dev如下

"dev": "webpack-dev-server --content-base build"

运行npm run dev命令或者是直接运行命令webpack-dev-server --content-base build，然后浏览器访问localhost:8181就可以看到下面的效果了，一般是建议使用命令修改根目录的方式。



如果把dev的命令写成下面的这种形式，可能更容易理解一些，一下就可以看出build就是我们build目录

"dev": "webpack-dev-server --content-base ./build"

7.故障处理

Webpack 的配置比较复杂，很容出现错误，下面是一些通常的故障处理手段。一般情况下，webpack 如果出问题，会打印一些简单的错误信息，比如模块没有找到。我们还可以通过参数 

--display-error-details

 来打印错误详情，完成命令如下：

webpack --display-error-details

Webpack 的配置提供了 

resolve

 和 

resolveLoader

 参数来设置模块解析的处理细节，

resolve

 用来配置应用层的模块（要被打包的模块）解析，

resolveLoader

 用来配置 

loader

 模块的解析。

当引入通过 npm 安装的 node.js 模块时，可能出现找不到依赖的错误。Node.js 模块的依赖解析算法很简单，是通过查看模块的每一层父目录中的 

node_modules

 文件夹来查询依赖的。当出现 Node.js 模块依赖查找失败的时候，可以尝试设置 

resolve.fallback

 和 

resolveLoader.fallback

 来解决问题。

module.exports = {
resolve: { fallback: path.join(__dirname, "node_modules") },
resolveLoader: { fallback: path.join(__dirname, "node_modules") }
};

Webpack 中涉及路径配置最好使用绝对路径，建议通过 

path.resolve(__dirname,
"app/folder")

 或 

path.join(__dirname, "app", "folder")

 的方式来配置，以兼容
Windows 环境。

WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）介绍了配置-插件-环境-排错,WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）将会介绍WebPack的一些深入的东西，涉及到性能优化以及使用过程中的一些细节和技巧（主要是配置和插件的深入），适合比较了解WebPack的同学学习。

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）

博客地址：http://blog.csdn.net/pcaxb/article/details/53390151

下载地址：http://download.csdn.net/detail/pcaxb/9696873

WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）

博客地址：http://blog.csdn.net/pcaxb/article/details/53393997

下载地址：http://download.csdn.net/detail/pcaxb/9697579

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）

博客地址：http://blog.csdn.net/pcaxb/article/details/53466261

下载地址：http://download.csdn.net/detail/pcaxb/9702314

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）

博客地址：http://blog.csdn.net/pcaxb/article/details/53515234

下载地址：http://download.csdn.net/detail/pcaxb/9705351