webpack-react使用初体验
2017-01-24 本文已影响0人
阿伦的前端成长之路
1.前言
初次接触webpack 参考了网上的教程，首先介绍一下webpack：我的理解：强大的打包工具，帮助实现项目的模块化
1.1 为什么使用webpack
| 特色 | 优点 |
|---|---|
| 模块化 | 实现代码的按需加载 |
| 代码比如样式和图片的压缩 | 解决大型网站或者应用加载慢的问题 |
| 丰富的loader | 可以加载多种类型的文件整合到js文件中 |
| 丰富的资源 | 可以整合第三方库 |
2.开搞
2.1开始配置
- 全局安装
npm install webpack -g
-
建立项目文件夹
结构如下：
](https://img.haomeiwen.com/i4289237/4e5ad59ea986cf23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://img.haomeiwen.com/i4289237/ba7c77999e7c51d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
（这里的package.json用来阐述依赖的文件等信息，可以通过命令行直接建立）
npm init
npm install //创建package.json,根据提示一步步设置相应信息即可
2.2根据git资源及阮一峰react教程，我们将blog留言板功能划分为3个组件，messageBoard.js messageForm.js messageList.js 并放置在components文件夹中。
代码详见：github link
2.3 react组件编写完成后，在html文件夹中创建用户界面，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack with react</title>
</head>
<body>
<div id="container"></div>
<script src="../js/dist/bundle.js"></script>//这里的bundle.js文件是css文件，js文件通过webpack加载器整合后生成输出到dist文件夹的
</body>
</html>
2.4 webpack文件配置
编辑webpack.config.js
var path = require('path');
module.exports = {
entry: './js/entry.js', ／／入口文件位置
output: {
path: path.join(__dirname, 'js/dist'),
filename: 'bundle.js'
}, ／／输出文件位置及文件名称
module: {
loaders: [{
test: /\.js|jsx$/,
loader: 'jsx?harmony' 这里是webpack最重要的部分，告诉文件用什么加载处理。这里加载的是jsx！
}]
}
}
2.5 大功告成，命令行运行 webpack
用浏览器查看index.html
