标签：编译 还需 安装完成 初始化 通过 html mat 项目目录 包管理器 我们通过 npm 在全局环境下安装 webpack：
npm install webpack -g
安装完成后，我们可以使用 webpack 命令，执行
webpack --help
能够查看 webpack 提供的所有命令。 不过，建议在项目下安装一份局域的 webpack：
npm install webpack --save-dev
如果觉得 npm 安装太慢，可以尝试 npm 的替代工具 ied – 我的使用经历，它的速度比 npm 快太多了。 安装好 webpack 后，我们要怎么开始一个项目？ 如果你用过 grunt.js、gulpjs 一类工具，它们可以借助 yeoman 来初始化项目。webpack 的情况不太一样，我们可以把它当作 node.js 项目来初始化。当然，借用一些模板会更省事，比如react transform boilerplate。 但这里还是聊聊如何手动初始化一个 webpack 项目。 创建一个 package.json 文件，用于保存项目版本、依赖关系等
npm init -y
在当前目录下安装 webpack
npm install webpack --save-dev
这时，我们的项目下有两个内容： 我们还需要一个 index.html 文件，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
</body>
</html>
现在，我们可以通过 live-server 等访问到 index.html 页面。 目前页面上还是一片空白，除了一个标题。 单页面应用里，项目通常会有一个入口（entry）文件，假设是 main.js，我们通过配置 webpack 来指明它的位置。 首先，在项目根目录新建一个 webpack.config.js，这是 webpack 默认的配置文件名称，添加以下内容：
module.exports = {
entry: ‘./main.js‘
};
尝试在项目根目录执行 webpack，会提示我们， Output filename not configured. 因为我们只是设定了入口（entry），还没有指定一个输出文件的路径与名称。 在 webpack.config.js 中添加一个 output：
module.exports = {
entry: ‘./main.js‘,
output: {
path: __dirname, // 输出文件的保存路径
filename: ‘bundle.js‘ // 输出文件的名称
}
}
现在在项目里执行 webpack 命令，我们的根目录下会多出一个 bundle.js 文件：
接下来，在 index.html 中引用 bundle.js 文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack 教程</title> </head> <body> <script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 --> </body> </html>
大功告成。
这是 webpack 一类工具的特点，它们在 HTML 文件直接引用构建后的 js 文件，而不是源文件。
当然，这可能会引发性能问题，毕竟，如果每一点文件修改都会导致整个 bundle.js 文件重新构建的话，碰上大一点的项目，有几千个源文件要编译，编译速度可能很慢。webpack 有它的解决办法，具体参见它的文档。
实时刷新在 html 文件中引用 bundle.js 文件后，我们有几个问题需要解决。
main.js 或它所引用的模块的变化如何通知 webpack，重新生成 bundle.js？
非常简单，在根目录下执行 webpack --watch 就可以监控目录下的文件变化并实时重新构建。
上面只是实时构建，我们该如何把结果通知给浏览器页面，让 HTML 页面上的 bundle.js 内容保持最新？
webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决实时构建的问题。
?
安装 webpack-dev-server在全局环境中安装 webpack-dev-server：
npm install webpack-dev-server -g
在项目根目录下执行命令：
$ webpack-dev-server
这样，我们就可以在默认的 :8080 网址上打开我们的 index.html。
此时，我们可能认为事情是按以下顺序发生的，
但不幸的是，我们「自以为是」了。:8080/index.html 对 js 文件的变化无动于衷。
webpack-dev-server 提供了用于自动刷新页面：
iframe 模式
我们不访问 :8080，而是访问 :8080/webpack-dev-server/index.html
inline 模式
在命令行中指定该模式，webpack-dev-server --inline。这样:8080/index.html 页面就会在 js 文件变化后自动刷新了。
以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。
webpack-dev-server 还提供了一种 --hot 模式，属于较高阶的应用。
第三方库webpack 并不是包管理器，所以如果我们要使用第三方库，需要借助 npm。比如，在项目里安装 jQuery：
npm install jquery --save
这样我们在当前项目目录下安装了 jQuery，并将它写入 package.json 里的依赖里。
模块化 模块化 JavaScript如果我想用 ES6 的方式引入 jQuery 模块，比如：
import $ from ‘jquery‘
怎么办？浏览器目前还不提供原生支持，webpack 原生也仅支持 CommonJS 的那种写法，但借助 ，我们可以加载 es6 模块：
安装 babel-loader
npm install babel-loader babel-core babel-preset-es2015 --save-dev
配置 webpack.config.js
在 module.exports 值中添加 module：
相关文章
精彩导读
热门资讯
关注我们
