webpack入门

遇到问题首先到github项目的Issues中,检索一下相关问题,比在百度谷歌上直接搜索非官方解决方案好得多。

1、npm init 生成 package.json

2、npm i -D webpack 生成

# npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies

3、运行

(1)

webpack用node_modules/.bin/webpack app/main.js public/bundle.js命令出错_大雄-dx的博客-CSDN博客_webpack 使用nodemodules

(2)package.json里面添加 然后npm start

  "scripts": {

    "start": "webpack --config webpack.config.js"

  },

Webpack 是一个打包模块化 JavaScript 的工具,它会从 main.js 出发,识别出源码中的模块化导入语句, 递归的寻找出入口文件的所有依赖,把入口和其所有依赖打包到一个单独的文件中。 从 Webpack2 开始,已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。

4、loader  webpack只原生支持js 和  json

配置loader的两种方式:

(1)每一个 Loader 都可以通过 URL querystring 的方式传入参数,例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

(2)给 Loader 传入属性的方式除了有 querystring 外,还可以通过 Object 传入,以上的 Loader 配置可以修改为如下:

特殊:

5、plugins

6、DevServer

  1. 提供 HTTP 服务而不是使用本地文件预览;
  2. 监听文件的变化并自动刷新网页,做到实时预览;
  3. 支持 Source Map,以方便调试。

DevServer 会把 Webpack 构建出的文件保存在内存中,在要访问输出的文件时,必须通过 HTTP 服务访问

由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性,所以要获取新编译后的 bundle.js 的正确 URL 是 http://localhost:8080/bundle.js,对应的 index.html 应该修改为:<script src="./dist/bundle.js"></script>改为<script src="bundle.js"></script>

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 DevServer 输出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

如果尝试修改 index.html 文件并保存,你会发现这并不会触发实时刷新,需要手动刷新。导致这个问题的原因是 Webpack 在启动时会以配置里的 entry 为入口去递归解析出 entry 所依赖的文件,只有 entry 本身和依赖的文件才会被 Webpack 添加到监听列表里。 而 index.html 文件是脱离了 JavaScript 模块化系统的,所以 Webpack 不知道它的存在。

7、SourceMap

在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差。如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题。 在编译器输出的代码上进行断点调试是一件辛苦和不优雅的事情, 调试工具可以通过 Source Map 映射代码,让你在源代码上断点调试。

加上--devtool source-map参数重启 DevServer 后刷新页面,再打开 Chrome 浏览器的开发者工具,就可在 Sources 栏中看到可调试的源代码了。

图一没加的时候

图二加完以后 其实只多了main.css的源码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值