[Webpack并不难]使用教程(一)— entry,devtool,output,resolve

[Webpack并不难]使用教程(一)— entry,devtool,output,resolve

大家好,又见面了,我是全栈君。

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官网的文档

  1. root:包含您的模块的目录(绝对路径)。
  2. extensions: 加载模块时可忽略的扩展名。
  3. 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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107847.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • vimrc简易配置

    vimrc简易配置最近在练习写脚本,但格式老搞得我头疼,查了半天发现了vimrc;在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有显示行号、语法高亮度显示、智能缩进等功能。环境是centos7.6的系统直接修改即可vim~/.vimrc不过我的位置在另一个地方(估计是系统不一样吧)vim/etc/vimrcsetnu#显示行数syntaxenabl…

  • String转JSONArray,遍历JSONArray,Array数组转换成JSON字符串

    String转JSONArray,遍历JSONArray,Array数组转换成JSON字符串String转JSONArray, /** *String转JSONArray */ publicstaticvoidtest1(){ Stringjson="[{\"name\":\"张三\",\"code\":\"123\"},{\"name\":\"李四\",\"code\":\"123\"}]&quot

  • native/ascii在线转换工具_中文转ascii

    native/ascii在线转换工具_中文转ascii1,原理Property文件中,使用的编码根据机器的设置可能是GBK或者UTF-8。而在Java中读取Property文件时使用的是Unicode编码,编码方式不同会导致中文乱码,因此需要将Property文件中的中文字符转化成Unicode编码才能正常显示中文。2,解决办法Java提供了native2ascii这种专门的工具对Property文件进行编码转换,在JDK安装环境的bin目录下可以找…

  • mac idea2021 激活码(JetBrains全家桶)

    (mac idea2021 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~41MD…

  • mysql java uuid_Java生成UUID 与 MySQL数据库如何生成uuid数据

    mysql java uuid_Java生成UUID 与 MySQL数据库如何生成uuid数据一、Java1.UUID简介UUID含义是通用唯一识别码(UniversallyUniqueIdentifier),这是一个软件建构的标准。也是被开源软件基金会(OpenSoftwareFoundation,OSF)的组织应用在分布式计算环境(DistributedComputingEnvironment,DCE)领域的一部分。UUID的目的,是让分布式系统中的所有…

  • pve安装docker图形化_怎么安装docker

    pve安装docker图形化_怎么安装docker基本相当于转载,但我光贴图也不行啊,还是把步骤加上去年年底这NUC到手时,就装PVE练手,然而最后做主力挂机的是那会买的个1037U小主机当时就尝试过装LibreELEC,结果是接显示器黑屏不过后来我直接在宿主机上装桌面和Kodi,但是吧那源里的Kodi是17的对于x265是软解。。。怎么装当然是看的值得买上的这个人家是OMV咱这是PVE都是装桌面再装KODI,但是为了保持纯净的PVE所以才想直通…

    2022年10月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号