We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
原文英文版来自webpack官网 demo代码 本文地址
这是一篇通过一个小例子给你介绍webpack的文章 你可以通过这篇文章了解到：
你需要先安装node.js。 $ npm install webpack -g
$ npm install webpack -g
上面这句命令成功后，webpack命令行就可以使用了。 (如果你运行这句命令出错，可以试试$ cnpm install webpack -g。cnpm需要安装)
$ cnpm install webpack -g
创建一个空文件夹。 在文件夹里先创建两个文件entry.js，index.html
document.write('webpack正常运行');
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
然后运行下面这句命令： $ webpack ./entry.js bundle.js 这句命令行将会编译你的js文件entry.js，并且会创建一个新的js文件bundle.js。 如果编译成功，将会出现如下提示： 用浏览器打开index.html，你能看到webpack正常运行
$ webpack ./entry.js bundle.js
webpack正常运行
下一步，我们在新的js文件里添加一些代码。
module.exports = "content.js.正常工作";
// document.write("webpack正常运行"); document.write(require("./content.js"));
再用下面的命令行编译一下 $ webpack ./entry.js bundle.js 刷新你的浏览器，你可以看到文字content.js.正常工作
content.js.正常工作
webpack将会分析你的入口文件(entry.js)与其他js文件的依赖关系。这些js文件（也可以成为模块）也会被打包进bundle.js文件。webpack将会给每一个模块一个唯一的ID，保存到bundle.js文件，通过唯一ID可以访问到。只要入口模块会在执行时被调用。（入口模块再提到用其它他所依赖的模块）。执行时，只提供必需的方法模块，必要时才执行依赖，调用依赖模块。 （恕我语言表达能力有点烂，有疑惑的朋友请移步看我另一篇文章webpack把你的项目编译成了什么）
我们想在应用里加一个css文件。 webpack只能处理Javascript，所以我们需要css加载器(css-loader)去加载css文件。我们还需要样式加载器(style-loader)把css文件应用到style标签内。 运行npm install css-loader style-loader命令安装这些加载器(loader)。(不需要安装到全局，所以不要-g参数)。这个命令将会帮你创建一个node_modules文件夹，加载器都在这个文件夹里。
css加载器(css-loader)
样式加载器(style-loader)
npm install css-loader style-loader
-g
node_modules
同样也可以使用cnpm install css-loader style-loader。cnpm需要安装)
cnpm install css-loader style-loader
继续：
body { background: yellow; }
*修改 entry.js文件
//document.write("webpack正常运行"); require("!style!css!./style.css"); document.write(require("./content.js"));
重新编译，然后刷新浏览器，可以看到页面的背景色为黄色。
通过前置加载器去请求模块，管道机制处理模块。这些加载器在特定的方式中改变文件内容。这文件被处理后，最后变成一个JavaScript模块。
绑定加载器
我们不想去写很长的加载代码require("!style!css!./style.css");。 我们可以把文件的后缀名绑定到加载器上，然后我们只需要写：require("./style.css")。
require("!style!css!./style.css");
require("./style.css")
//document.write("webpack正常运行"); //require("!style!css!./style.css"); require("./style.css"); document.write(require("./content.js"));
运行下面的命令进行编译： webpack ./entry.js bundle.js --module-bind "css=style!css" 浏览器你能看到同样的结果
webpack ./entry.js bundle.js --module-bind "css=style!css"
我们可以把命令行里的参数移到配置文件里：
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
现在我们只需要运行：
webpack
去编译
随着该项目的增长，编译可能需要更长的时间。所以我们要展示一些进度条。我们还想要的颜色…我们通过下面命令行可以做到：
webpack --progress --colors
我们不想每一次项目变化都要手动编译……
webpack --progress --colors --watch
webpack可以缓存两次编译之间没有变化的模块和输出文件。
当我们使用观察模式进行编译的时候。如果检测到任何更改，webpack将再次运行编译。如果检测到某个文件没有改变就启用高速缓存，直接使那个模块webpack缓存。
使用开发服务器开发体验会更好
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
这将在本地启动一个8080端口的服务，指向静态文件index.html以及bundle.js(bundle自动编译)。每当bundle.js重新自动编译，会自动刷新浏览器（通过websocket机制）。打开浏览器 http://localhost:8080/webpack-dev-server/bundle
The text was updated successfully, but these errors were encountered:
No branches or pull requests
原文英文版来自webpack官网
demo代码
本文地址
欢迎浏览
这是一篇通过一个小例子给你介绍webpack的文章
你可以通过这篇文章了解到：
安装webpack
你需要先安装node.js。
$ npm install webpack -g设置，编译
创建一个空文件夹。
在文件夹里先创建两个文件entry.js，index.html
然后运行下面这句命令：
$ webpack ./entry.js bundle.js这句命令行将会编译你的js文件entry.js，并且会创建一个新的js文件bundle.js。
如果编译成功，将会出现如下提示：
用浏览器打开index.html，你能看到
webpack正常运行两个js文件
下一步，我们在新的js文件里添加一些代码。
再用下面的命令行编译一下
$ webpack ./entry.js bundle.js刷新你的浏览器，你可以看到文字
content.js.正常工作第一个加载器(loader)
我们想在应用里加一个css文件。
webpack只能处理Javascript，所以我们需要
css加载器(css-loader)去加载css文件。我们还需要样式加载器(style-loader)把css文件应用到style标签内。运行
npm install css-loader style-loader命令安装这些加载器(loader)。(不需要安装到全局，所以不要-g参数)。这个命令将会帮你创建一个node_modules文件夹，加载器都在这个文件夹里。继续：
*修改 entry.js文件
重新编译，然后刷新浏览器，可以看到页面的背景色为黄色。
绑定加载器
我们不想去写很长的加载代码
require("!style!css!./style.css");。我们可以把文件的后缀名绑定到加载器上，然后我们只需要写：
require("./style.css")。运行下面的命令进行编译：
webpack ./entry.js bundle.js --module-bind "css=style!css"浏览器你能看到同样的结果
配置文件
我们可以把命令行里的参数移到配置文件里：
现在我们只需要运行：
webpack去编译
漂亮的输出
随着该项目的增长，编译可能需要更长的时间。所以我们要展示一些进度条。我们还想要的颜色…我们通过下面命令行可以做到：
观察模式
我们不想每一次项目变化都要手动编译……
webpack可以缓存两次编译之间没有变化的模块和输出文件。
开发服务器
使用开发服务器开发体验会更好
这将在本地启动一个8080端口的服务，指向静态文件index.html以及bundle.js(bundle自动编译)。每当bundle.js重新自动编译，会自动刷新浏览器（通过websocket机制）。打开浏览器 http://localhost:8080/webpack-dev-server/bundle
谢谢
The text was updated successfully, but these errors were encountered: