用Webpack(npm install -g webpack)代码打包,Webpack大致需要知道三件事:

1)让Webpack知道应用程序或js文件的根目录

2)让Webpack知道做何种转换

3)让Webpack知道转换后的文件保存在哪里

具体来说,大致要做以下几件事情:

1)在项目根目录下有一个webpack.config.js文件,这个是惯例

2)确保webpack.config.js能导出一个对象

module.exports = {};

3)告诉Webpack入口js文件在哪里

module.exports = {
entry: ['./app/index.js']
}

4)告诉Webpack需要哪些转换插件

module.exports = {
entry: ['./app/index.js'],
module: {
loaders: []
}
}

所有的转换插件放在loaders数组中。

5)设置转换插件的细节

module.exports = {
entry: ['./app/index.js'],
module: {
loaders: [
{
test: /\.coffee$/,
include: __dirname + 'app',
loader: "coffee-loader"
}
]
}
}
  • test:运行.coffee结尾的文件
  • include:哪些文件件
  • loader:具体的转换插件

6)告诉Webpack导出到哪里

module.exports = {
entry: ['./app/index.js'],
module: {
loaders: [
{
test: /\.coffee$/,
include: __dirname + 'app',
loader: "coffee-loader"
}
]
},
output: {
filename: "index_bundle.js",
path: __dirname + '/dist'
}
}

【文件结构】

app/

.....components/

.....containers/

.....config/

.....utils/

.....index.js

.....index.html

dist/

.....index.html

.....index_bundle.js

package.json

webpack.config.js

.gitignore

我们不禁要问,如何保证app/index.html和dist/index.html同步呢?

如果,我们每次运行webpack命令后,把app/index.html拷贝到dist/index.html中就好了。

解决这个问题的人是:html-webpack-plugin(npm install --save-dev html-webpack-plugin)。

引入html-webpack-plugin之后,webpack.config.js看起来是这样的:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
}); module.exports = {
entry: ['./app/index.js'],
module: {
loaders: [
{
test: /\.coffee$/,
include: __dirname + 'app',
loader: "coffee-loader"
}
]
},
output: {
filename: "index_bundle.js",
path: __dirname + '/dist'
},
plugins: [HTMLWebpackPluginConfig]
}
  • template: 表示源文件来自
  • filename:目标文件的名称
  • inject: 'body'表示把对dist/index_bundle.js文件的引用,放到目标文件dist/index.html的body部分

【Webpack的一些指令】

webpack
webpack -w //监测文件变化
webpack -p //不仅包括转换,还包括最小化文件

【Babel】

Babel可以用来把JSX文件转换成js文件。与Babel相关的安装包括:

npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-react
  • babel-core: 就是babel本身
  • babel-loader:用来加载
  • babel-preset-react:用来完成JSX到JS的文件转换

在项目根文件夹下创建.babelrc文件。

{
"presets": ["react"]
}

把babel-loader放到webpack.config.js文件的设置中去。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
}); module.exports = {
entry: ['./app/index.js'],
module: {
loaders: [
{
test: /\.js$/,
include: __dirname + 'app',
loader: "babel-loader"
}
]
},
output: {
filename: "index_bundle.js",
path: __dirname + '/dist'
},
plugins: [HTMLWebpackPluginConfig]
}

参考:http://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/

使用Webpack和Babel来搭建React应用程序的更多相关文章

  1. 使用Gulp和Browserify来搭建React应用程序

    对React有一定了解之后,我们知道,需要把JSX文件转换成JS文件,组件需要导入导出.本篇就体验使用Gulp把JSX文件转换成JS文件,使用Browserify来把组件捆绑到一个文件并理顺组件之间的 ...

  2. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  3. react基于webpack和babel以及es6的项目搭建

    项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...

  4. React+Webpack+Webstorm开发环境搭建

    需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...

  5. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  6. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  7. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  8. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  9. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

随机推荐

  1. 建立自己的git repository

    环境是windows 1.首先安装Git,下载Git安装包,这个google 就好了 2.注册自己的git账号 https://github.com 3.建立仓库 填好名字 最后那个Initializ ...

  2. Github两步认证

    获取密钥:ssh-keygen -t rsa  切换到公钥所在路径:cd .ssh 查看该路径下的所有文件:ls 查看公钥:cat id_rsa.pub 获取密钥之后,去https://github. ...

  3. iOS 微信支付

    相关资料 SDK下载:https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=11_1 APP端开发步骤说明:https://pay.weixin ...

  4. (Python )控制流语句if、for、while

    这一节,我们将学习Python的控制流语句,主要包括if.for.while.break.continue 和pass语句 1. If语句 if语句也许是我们最熟悉的语句.其使用方法如下: x=inp ...

  5. C#压缩文件 不压缩路径

    我想把 E:\\AA\BB\11.txt 压缩后存入 E:\\AA1\BB1\11.rar 但是当我解压( E:\\AA1\BB1\11.rar)的时候,发现:11.txt 不是在 E:\\AA1\B ...

  6. [Chapter 3 Process]Practice 3.12 Including the initial parent process, how many processes are created by the program shown in Figure 3.32?

    3.12 Including the initial parent process, how many processes are created by the program shown in Fi ...

  7. php执行流程

    1.源码文件编写,php源文件 2.词法分析,token 3.语法分析,生成opcode并组成opcode array 4.执行opcode,返回结果

  8. 手写DataSet,DataTable

    一:DataSet DataSet ds = new DataSet();//创建DataSet DataTable dt = new DataTable();//创建一个DataTalbe dt.C ...

  9. jquery checkbox选中、改变状态、change和click事件

    jquery判断checked的三种方法:.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('che ...

  10. .NET调用window串口读取电子秤的数据

    Private serialPort As SerialPort  '定义 Public Function CreateSerialPort() As String        Dim strWei ...