webpack初识!
2016-03-04 10:33
615 查看
最近在使用webpack 感觉棒棒哒 下面这个简单的教程可以让你走入webpack的世界
通过这些这篇文章你可以学到
如何安装webpack
如何使用webpack
如何使用加载器
如何使用开发服务器
$ npm install webpack -g
这样就可以使用webpack命令
添加 entry.js
添加 index.html
在当前文件夹下输入下面命令
$ webpack ./entry.js bundle.js
运行上面命令将会把entry.js编译为bundle.js,如果编译成功就会有下面的提示
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/fa9fc996c699b93abdd9bd6e018a4ebb.png)
在浏览器里打开index.html
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/870bee03556b35c5d9e4f79e99b22cb2.png)
添加 content.js
修改 entry.js
然后继续编译
$ webpack ./entry.js bundle.js
刷新浏览器
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/1972c9406d521d13c99acfedd2d6cba1.png)
webpack 会分析你的entry文件所依赖的其他文件,这些文件(也叫模块)也会被包含在你的bundle.js中,webpack会给每个模块一个唯一的id并且通过这些id很容易的保存所有模块到bundle.js。在启动时只有入口模块被调用执行,一个简单的运行提供了所需的功能并且在需要其他模块时执行依赖
WebPack只能处理JavaScript本身,所以我们需要CSS加载器来处理CSS文件。我们还需要的样式装载在CSS文件应用的样式。
在控制台之行
来安装加载器(需要本地安装所以不需要-g 在项目文件夹里安装)安装后会在项目文件里创建一个node-modules 文件夹
接下来我们创建一个 style.css
修改 entry.js
继续执行上面那句编译命令再刷新浏览器
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/06307c17a1472be141e7ff3169983dda.png)
通过前缀加载器这个模块儿以某种渠道被加载 这些加载器通过特殊的方式转换文件内容 转换后成为javascript模块
那么我们可以为加载器绑定文件扩展名 之后我们就可以直接写require("./style.css")这样
修改entry.js
编译
webpack ./entry.js bundle.js --module-bind 'css=style!css'
有些环境可能要在"css=style!css" 加双引号
添加webpack.config.js文件
现在我们只需要在终端执行
webpack
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/564b4378ec1689d506bab1d228ad8a21.png)
webpack命令需要在webpack.config.js所处的文件目录下执行
webpack --progress --colors
webpack --progress --colors --watch
webpack在编译时可以缓存未改变的模块儿和输出文件
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
本文翻译于 webpack官网开始教程
欢迎使用webpack
这个小教程通过简单的例子来引导大家使用webpack通过这些这篇文章你可以学到
如何安装webpack
如何使用webpack
如何使用加载器
如何使用开发服务器
安装webpack
你的电脑上需要先安装node.js$ npm install webpack -g
这样就可以使用webpack命令
编码
在一个空的文件夹里创建一个文件添加 entry.js
document.write("It works.");
添加 index.html
<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
运行上面命令将会把entry.js编译为bundle.js,如果编译成功就会有下面的提示
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/fa9fc996c699b93abdd9bd6e018a4ebb.png)
在浏览器里打开index.html
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/870bee03556b35c5d9e4f79e99b22cb2.png)
第二个文件
接下来 我们把一些代码移到另一个文件添加 content.js
module.exports = "It works from content.js."
修改 entry.js
- document.write("It works"); + document.write( require("./content.js));
然后继续编译
$ webpack ./entry.js bundle.js
刷新浏览器
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/1972c9406d521d13c99acfedd2d6cba1.png)
webpack 会分析你的entry文件所依赖的其他文件,这些文件(也叫模块)也会被包含在你的bundle.js中,webpack会给每个模块一个唯一的id并且通过这些id很容易的保存所有模块到bundle.js。在启动时只有入口模块被调用执行,一个简单的运行提供了所需的功能并且在需要其他模块时执行依赖
第一个加载器
我们希望在我们的应用里添加css文件WebPack只能处理JavaScript本身,所以我们需要CSS加载器来处理CSS文件。我们还需要的样式装载在CSS文件应用的样式。
在控制台之行
npm install css-loader style-loader
来安装加载器(需要本地安装所以不需要-g 在项目文件夹里安装)安装后会在项目文件里创建一个node-modules 文件夹
接下来我们创建一个 style.css
body{background:#ff0000;}
修改 entry.js
+require("!style!css!./style.css"); document.write(require("./content.js));
继续执行上面那句编译命令再刷新浏览器
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/06307c17a1472be141e7ff3169983dda.png)
通过前缀加载器这个模块儿以某种渠道被加载 这些加载器通过特殊的方式转换文件内容 转换后成为javascript模块
捆绑加载器
我们不希望写require("!style!css!./style.css");这么长么长的require那么我们可以为加载器绑定文件扩展名 之后我们就可以直接写require("./style.css")这样
修改entry.js
- require("!style!css!./style.css"); + require("./style.css"); document.write(require("./content.js"));
编译
webpack ./entry.js bundle.js --module-bind 'css=style!css'
有些环境可能要在"css=style!css" 加双引号
配置文件
我们希望把所有的配置都放在一个配置文件里面添加webpack.config.js文件
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
现在我们只需要在终端执行
webpack
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/18/564b4378ec1689d506bab1d228ad8a21.png)
webpack命令需要在webpack.config.js所处的文件目录下执行
一个有趣的输出
如果我们的项目文件较大需要一个较长时间的编译 编译时我们希望有一个带颜色的进度条展示 我们可以通过一下命令实现webpack --progress --colors
监听模式
如果不想每次修改文件都去重新执行一遍命令我们可以用下面命令来监听文件变化并编译webpack --progress --colors --watch
webpack在编译时可以缓存未改变的模块儿和输出文件
开发环境服务
这个主要是起了个node的sever服务可以在浏览器上通过设置的端口访问并且还能实时刷新页面的修改内容,非常方便实用哟npm install webpack-dev-server -g
webpack-dev-server --progress --colors
本文翻译于 webpack官网开始教程
相关文章推荐
- 一小时包教会 —— webpack 入门指南
- Webpack 新手入门
- Karma 4 - Karma 集成 Webpack 进行单元测试
- webpack备忘录
- webpack的问题;
- Webpack的安装、配置与执行
- webpack
- webpack入门(七) API in LOADERS
- 基于webpack的模块化构建
- webpack入门(六) API in modules
- webpack入门(五)webpack CLI
- webpack入门(四)webpack的api 2 module
- Webpack
- webpack 发布配置
- webpack入门(三)webpack的api
- webpack入门(二)what is webpack
- webpack 自动发现 entry 的配置和引用方式
- browserify和webpack
- webpack学习笔记<使用>
- WebPack