本文介绍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
相关推荐
在这个"webpack基本配置案例"中，我们将深入理解Webpack的核心概念和基础配置。 首先，Webpack 的核心思想是"一切都是模块"，它通过加载器（Loader）将不同类型的文件转换为JavaScript模块，然后通过插件（Plugin）...
以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，webpack中的loader，打包发布，Source Map以及在浏览器中安装vue-devtools调试工具。...
webpack 3.X基本配置
通过以上内容，你已经了解了Webpack的基本配置和插件使用，但Webpack的功能远不止于此，还包括Source Map、externals、性能分析等高级特性。继续深入学习，可以更好地驾驭Webpack，优化你的前端项目。
在“webpack基本配置”中，我们通常会涉及以下几个关键部分： 1. **入口(entry)**：定义应用程序的起点，Webpack 从这个入口开始递归解析依赖并构建模块图。可以是一个字符串，表示单个入口，也可以是一个对象，...
接下来，我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境，以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前，首先确保已安装 Node.js。然后通过 `npm`（Node Package ...
以上仅是Webpack配置的基本内容，实际配置中可能会根据项目需求进行更复杂的定制。例如，配置多个入口点以支持多页面应用，通过分隔Chunk（SplitChunksPlugin）优化代码分割，或者使用ProvidePlugin全局注入模块，...
本篇文章将深入探讨Vue 1.x与Webpack的基本配置和相关依赖包。 1. **Vue 1.x 版本概述** Vue 1.x 是Vue.js的早期版本，虽然现在已经更新到了3.x，但在一些旧项目中仍然被使用。它提供了一个响应式的数据绑定系统，...
Webpack 是一个前端资源模块化和打包工具，它允许开发者将应用程序分解为小块（模块），然后根据需要在浏览器中加载这些...这个“webpack-master”项目提供了一个基础的框架，便于学习和实践 Webpack 的配置和使用。
接下来，创建 `webpack.config.js` 文件并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', // 项目入口文件 output: { // 输出设置 filename: '...
通过这个压缩包，你可以学习到Webpack的基本配置流程，包括创建`webpack.config.js`文件，设置入口和输出，以及管理项目依赖。在实际开发中，你可能还需要根据项目需求添加更多的loader和plugin，以支持更多的文件...
对于初学者来说，理解基础配置和掌握如何根据项目需求调整配置是非常重要的。 压缩包中的文件“t5_bf”可能是配置文件或示例项目的某个部分，但由于缺乏具体信息，无法给出更详细的解读。为了进一步了解和使用这个...
在本篇文章中，我们将详细介绍如何配置 Webpack 项目开发环境，包括安装 Node.js、创建项目、安装 Webpack、创建 Webpack 配置文件等步骤。 Node.js 安装 在开始配置 Webpack 项目之前，需要首先安装 Node.js。...
2. **webpack默认压缩工具uglifyjs-webpack-plugin**：基本的压缩，移除了空格和注释，但代码仍可识别。 3. **webpack-obfuscator 无参数**：即使不提供任何混淆参数，也会对变量名进行哈希处理，使得代码更难以阅读...
这个教程将引导你深入了解 Webpack 的配置和操作，帮助你更好地管理和优化你的前端项目。 ## 一、Webpack 基本概念 Webpack 是一个静态模块打包器，它会分析你的项目依赖，然后将这些模块打包成静态资源。Webpack ...
以下是一个基本的Webpack配置文件`webpack.config.js`的示例，展示了如何设置多入口： ```javascript const path = require('path'); module.exports = { entry: { page1: './src/page1/main.js', // 第一个入口...
3. **编写webpack.config.js**：在根目录创建`webpack.config.js`文件，编写基本配置，包括入口、输出、模块（加载器）和插件配置。 ```javascript const path = require('path'); const MiniCssExtractPlugin =...
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它能够将多个文件组合...掌握这些知识点，开发者就能理解并配置一个基本的 Vue.js 项目，实现组件化开发和自动刷新功能，同时也能应对多页面应用的需求。
这个最简版的Webpack配置涵盖了基本的HTML和JS文件打包流程。通过Webpack，我们可以实现模块化开发，方便地管理和打包项目资源。随着项目的复杂度增加，你可以添加更多的配置项，如CSS加载器、图片加载器、优化选项...
通过以上实践，你可以了解到 Webpack 2 在项目中的基本配置和使用方法。然而，这只是冰山一角，Webpack 还有许多高级特性，如 CommonsChunkPlugin 分割公共代码、Tree Shaking 优化代码体积、Scope Hoisting 提升...