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

最新推荐文章于 2023-07-27 10:15:51 发布

置顶预见才能遇见

最新推荐文章于 2023-07-27 10:15:51 发布

阅读量1w

点赞数

分类专栏： # ReactJs + WebPack + Npm系列文章标签： WebPack安装 WebPack使用 WebPack Loader WebPack配置 WebPack插件

本文链接：https://blog.youkuaiyun.com/pcaxb/article/details/53393997

版权

ReactJs + WebPack + Npm系列专栏收录该内容

16 篇文章

订阅专栏

转载请注明预见才能遇见的博客：http://my.youkuaiyun.com/

原文地址：http://blog.youkuaiyun.com/pcaxb/article/details/53393997

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

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）http://blog.youkuaiyun.com/pcaxb/article/details/53390151详细介绍WebPack的安装-使用-Loader，WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）http://blog.youkuaiyun.com/pcaxb/article/details/53393997详细介绍配置-插件-环境-排错，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）http://blog.youkuaiyun.com/pcaxb/article/details/53466261详细介绍WebPack的配置和加载器，涉及到使用过程中的一些细节和技巧，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）http://blog.youkuaiyun.com/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.youkuaiyun.com/pcaxb/article/details/53390151

下载地址：http://download.youkuaiyun.com/detail/pcaxb/9696873

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

博客地址：http://blog.youkuaiyun.com/pcaxb/article/details/53393997

下载地址：http://download.youkuaiyun.com/detail/pcaxb/9697579

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

博客地址：http://blog.youkuaiyun.com/pcaxb/article/details/53466261

下载地址：http://download.youkuaiyun.com/detail/pcaxb/9702314

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

博客地址：http://blog.youkuaiyun.com/pcaxb/article/details/53515234

下载地址：http://download.youkuaiyun.com/detail/pcaxb/9705351