[Webpack并不难]使用教程（一）--- entry，devtool，output，resol

wudengzan 发布于2019-08-21 17:58 / 3342人阅读

摘要：这是局部安装局部安装的使用要带路径哇，要写路径，好麻烦哦，没事，那就全局安装吧。如果该值是一个相对路径，它将相对于包含的文件。就相当于就相当于就相当于后面带有意味着要完全匹配如果，因为没完全匹配，那么加载的是下文件夹里的使用教程二

Webpack是什么,我就不过多介绍了，大家都有耳闻，不过还是配张图让大家体会下。

我的webpack版本是 3.10.0

安装Webpack可以全局安装和局部安装。局部安装的话就最好在安装的当前目录下运行，你硬要在在外部用webpack？那你在命令行要输入安装webpack位置的路径了。

npm install --save webpack // 这是局部安装
./node_modules/.bin/webpack --help // 局部安装的使用要带路径

哇，要写路径，好麻烦哦，没事，那就全局安装吧。

npm install -g webpack

现在用webpack一般都写好配置文件的了，webpack.config.js，那么接下来就说这个配置文件主要怎样写。

module.exports = {
  devtool: "#eval-source-map", // 这个是打包的方式
  entry: "./main.js",          // 入口文件。支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出，对象形式也一样。
  output: {                    
    path: "./js",              // 打包后的文件存放位置
    publicPath: "/dist/",      // 这个下面详说
    filename: "build.js"       // 打包后的文件名
  },
  resolve: {                   // 查找module的话从这里开始查找，下面详说。
    root: "D:/webpack-test/src",
    extensions: [".js", ".json", ".scss"],
    alias: {
        // 下面有例子。
    }
  }
};

devtool：打包方式。（官网的文档）

devtool选项	打包速度	重建速度	是否支持生产模式
source-map	-	-	支持
eval-source-map	-	+	不支持
cheap-module-source-map	0	-	支持
cheap-module-eval-source-map	0	++	不支持
cheap-source-map	+	0	支持
cheap-eval-source-map	+	++	不支持
eval	+++	+++	不支持

从上到下,打包速度越来越快，开发环境一般用eval-source-map，生产环境自行斟酌咯。毕竟打包越快，打包质量也就越差。还有，不知大家发现没，带eval都不支持生产模式哦。

publicPath （官网的文档）

它被用来更新内嵌到css、html文件里的url值。

上面 publicPath: "/dist/" ,例如：

background-image:url("./test.png) // 路径变为"/dist/.test.png"
path: "/js" // 上面打包后的文件位置，那么路径变为"/dist/js/build.js"

pubilcPath很重要。在生产模式下如“test.png”文件可能会定位到CDN上并且你的Node.js服务器可能是运行在HeroKu（一个支持多种编程语言的云平台）上边的。一张图片，手动修改下咯，那如果你网站有上百张呢，那publicPath："你服务器的ip地址"，这样省事很多吧。

resolve （官网的文档）

root：包含您的模块的目录（绝对路径）。

extensions：加载模块时可忽略的扩展名。

alias：模块别名定义。举些例子：

"Abc": "/js/x/y/z/abc.js"  
// require("Abc"); 相当于 require("/js/x/y/z/abc.js")
// 如果 require("Abc/index.js"), 这样不行的。

"Abc": "./js/x/y/z/abc.js" 
// 如果该值是一个相对路径，它将相对于包含require的文件。
// 例如：在test.js中require("Abc"), 那么test.js和abc.js要在同目录下的。  
  
"Abc": "/js/store"
// require("Abc") 就相当于 require("/js/store/index.js")
// require("Abc/other.js") 就相当于 require("/js/store/other.js")
  
"Abc$": "/js/store"
// require("Abc") 就相当于 require("/js/store/index.js")
// 后面带有 $ ,意味着要完全匹配 "Abc"
// 如果 require("Abc/other.js")，因为没完全匹配Abc，那么加载的是 node_modules下Abc文件夹里的other.js！！！

使用教程（二）--- module.loaders

GPU云服务器云服务器 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

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

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

[Webpack并不难]使用教程（四）--- devServer

摘要：使用教程一，，，使用教程二使用教程三我的版本是官方的文档在开发模式下，提供虚拟服务器，让我们进行开发和调试。文档如果为，开启虚拟服务器时，为你的代码进行压缩。的警告和错误是不输出到终端的。而则作用于请求路径上的。不想启用也可以填。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loaders使用教程（三）--- pl...

Anonymous1 2019-08-22 11:15 评论0 收藏0
[webpack并不难]总结

摘要：刚写的时候，心里有很多小声音写不好的万一写错，误导别人怎么办等等。最重要还是感谢你的支持。接下来还会写些有趣的东西带给大家。这个教程就此完结咯，两周前的一个念头也实现了。刚写的时候，心里有很多小声音：写不好的 , 万一写错，误导别人怎么办等等。万事开头难，写着写着就发现和之前看到的一句话很贴切，输入一些东西很简单的，但你要输出确实比较难。使用教程（一）--- entry，...

forrest23 2019-08-22 11:18 评论0 收藏0
[Webpack并不难]使用教程（三）--- plugins

摘要：使用教程一，，，使用教程二版本官方的文档上一篇讲到的是被用来转换某些类型的模块，它则可以用来做更广泛的任务。可看作绑定事件，打包时会触发事件。它的作用是定义全局常量，是常量。为，启用两步之间的延迟。请注意，规范建议始终使用引号。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loadersWebpack版本 3.10...

Youngs 2019-08-22 13:40 评论0 收藏0
[Webpack并不难]把它当人物养成游戏吧。

摘要：发觉其实真的不难，毕竟它是一个工具，如果用起来都不顺手，那为什么那么多人用，是不是。我觉得可以把当成人物养成游戏来玩，哦不，来学。听说把宝石放进这工具就能自动更新打包。公司最近弄来了一些未来的文言文，你把它翻译成现代文吧。前言这段可以跳过看下面的。本来，这个教程想完结的了。但回头看自己写的，感觉就像写明了什么意思，具体怎么使用都没说明白，而且让人看得会有点乏味吧。我也是刚开始...

andot 2019-08-22 11:17 评论0 收藏0
[Webpack并不难]使用教程（二）--- module.loaders

摘要：官方的文档模块受到影响的选项。官方文档通过注入标签将添加到。官方文档这两者一般都是配合在一起用的。代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成码引用。不过它的放后面。第一篇讲了Webpack的安装，以及配置文件的 entry，devtool，output，resolve。这篇接着说配置文件的 module。想看看第一篇的朋友可以点这里。 ...

HollisChuang 2019-08-21 17:59 评论0 收藏0