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

提供 HTTP 服务而不是使用本地文件预览；
监听文件的变化并自动刷新网页，做到实时预览；
支持 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 栏中看到可调试的源代码了。