本文介绍Webpack辅助ReactJS进行开发的简单例子。
Webpack基础详解地址:http://2914905399.iteye.com/blog/2357893
简单来说,webpack是一个模块打包工具,在 webpack 里,所有类型的文件都可以是模块,包括我们最常见的 JavaScript,及 CSS 文件、图片、json 文件等等。通过 webpack 的各种加载器,我们可以更高效地管理这些文件。
本文配置webpack并使网页上输出最简单的Hello, World!!! 。程序使用React js完成并使用了ES2015。
1,创建一个空项目,在项目目录下创建一个package.json 文件,用于项目名称,依赖等等,终端命令如下:
npm init
2, 在当前目录下安装webpack以及其它依赖,由于使用React,所以引入了react和react-dom
npm install webpack react react-dom --save-dev npm install webpack -g
有时webpack需要获取管理员权限才能安装成功。sudo su之后再install即可解决
3, 此时目录下只有package.json 和node_modules两个文件,package.json中可以看到安装过的依赖,node_modules是install时生成的。
实现简单的HelloWorld,还需要创建一个index.html和一个入口文件index.js,出于简单,我都放在根目录。index.html为空,index.js实现网页输出HelloWorld。代码如下:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class HelloWorld extends Component {
render() {
return (
<div>
Hello, World ! ! !
</div>
)
}
}
ReactDOM.render(
<HelloWorld />,
document.getElementById('content')
);
4, 创建webpack配置文件webpack.config.js。并进行配置:
module.exports = {
entry: './index.js',
output: {
path: '',
filename: 'bundle.js'
}
};
entry: 设置入口文件
output: path为webpack打包成功之后文件存放路径。 filename为webpack打包成功之后文件名称。
webpack.config.js这个名字为webpack默认的配置文件,如果不想用这个名字,可以:
webpack -config yourname
5, 安装和使用Webpack Loader。
Webpack Loader作用:
1,将React js的jsx语句转化为js语句
2,支持ES2015
3,可以是js文件通过import直接引入css等样式以及图片。
等等等。
因为我需要使用Reactjs和ES2015,所以安装命令如下:
npm install babel-core babel-loader --save-dev npm install babel-preset-react babel-preset-es2015 --save-dev
具体实现需要在webpack-config.js中加入module属性。
module.exports = {
entry: './index.js',
output: {
publicPath: "",
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
}
};
6,在终端输入webpack。会看见生成了一个bundle.js文件。这个文件是webpack的entry文件打包成功之后得到的,存放路径和名字都是自己在webpack.config.js中设置的。
webpack
7,修改之前创建的index.html文件,并引入打包生成的bundle.js文件。代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
8,打开index.html,将会看到我们需要的 Hello,World!!!。但是每次我们修改文件并运行时都需要在终端输入webpack再刷新页面。这种方式比较麻烦。此时我们需要使用webpack-dev-server来实现页面自动刷新
(1)安装webpack-dev-server
npm install webpack-dev-server --save-dev npm install webpack-dev-server -g
(2)在package.json中添加
{
......
"scripts": {
"start": "webpack-dev-server --inline"
},
......
}
(3)配置完成,在终端输入:
npm start
在浏览器里面输入http://localhost:8080/ 页面上出现Hello,World!!!。 修改main.js中的Hello,World!!!为Hello,Curry!!!,等待两秒,不需要手动刷新,页面自动刷新,出现Hello,Curry!!!。 完成!!!
附参考网站:http://www.jianshu.com/p/418e48e0cef1
https://www.zfanw.com/blog/webpack-tutorial.html