本文介绍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
相关推荐
以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，webpack中的loader，打包发布，Source Map以及在浏览器中安装vue-devtools调试工具。...
webpack一些基本配置的注释和demo
这是一个基本的webpack入门配置案例
webpack 3.X基本配置
web前端开发webpack入门配置学习，轻松简单就能初始化一个webpack打包实例，webpack基本配置就是入口和出口的配置.
vue@1.x 最基本webpack配置和所需依赖包
由于这几个图片压缩的插件下载会经常失败，所以我整理了一下。 文件内容： ...配合我之前发布的webpack基本配置、react webpack配置和vue webpack配置使用。 详情请访问：https://blog.csdn.net/qq_45142260
02_2_1_webpack的安装 03_2_2_webpack_cli的使用 04_2_3_npx的原理介绍 05_2_4_webpack的应用场景 06_2_5_webpack的基础配置 07_2_6_将webpack命令配置到package_json 08_2_7_watch模式 09_2_8_webpack_dev_...
本文介绍了webpack 2.x配置reactjs基本开发环境详解，分享给大家，具体如下： 当前webpack版本：2.2；react: 15.4.2 webpack从1.x升级到2.x替换了几个接口，包括module.loaders这样的重要接口已被弃用（详细变更）。...
webpack4.0基本配置模版，可以根据实际情况升级自己的webpack
webpack_starter WEBPACK基本配置文件 1- npm安装2- npm启动
webpack 基本安装 开始前还是万万不能缺少的安装： npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文件 npm init //运行后 按提示填写 当然嫌麻烦 就直接下一步 下一步就好 无伤
webpack核心概念、配置文件的整体结构、模块化打包的基本流程、loader与plugin、live-reload（自动刷新）与hot-realod/HMR（热模替换）
Webpack Vue基本配置 使用此基本配置包可以清理所有复杂的设置，并依靠自动的依赖项更新。 如何 :warning: 确保已安装所有对等依赖项 // webpack.js const webpackConfig = require ( '@nextcloud/webpack-vue-...
webpack.config.js 实现三方插件与公共代码抽离的基本配置，CommonsChunkPlugin的配置使用
parallel-webpack-并行构建多个配置 parallel-webpack允许您parallel-webpack运行多个webpack构建，从而将工作分散到各个处理器上，从而有助于显着加快构建速度。 对于我们来说，它已将构建时间从16分钟减少到仅2...
webpack最基本的配置就是导出一个静态的对象，但是由于我们业务比较复杂，往往需要动态配置webpack以构建目标代码。 幸运的是，webpack为我们提供了动态配置webpack文件的支持。 下面介绍一下webpack的多种配置类型...
Webpackozea 我们在Kozea上针对React SSR应用程序的基本Webpack配置安装纱yarn add webpackozeanpm npm i webpackozea用法在您的webpack配置文件中import { getBaseConfigClient , getBaseConfigServer } from '...
单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的，只不过多页的配置需要在单页配置的基础上顾及到多个页面罢了，loader、output、plugins这些基本都不需要改动，需要改动的一般都是入口文件 ...
webpack基本用法，实现列表各行变色，和webpack打包基本配置，如果问题，及时沟通，相互学习，相互进步