刘贵学博客

React 边写边学 3 使用Webpack自动化管理

缘由

《React 边写边学 2:使用Babel》最后的章节里,很多执行命令,非常麻烦。本人将介绍Webpack自动化管理部署 React 项目。

Webpack介绍

npm install --save-dev webpack webpack-dev-server
npm install --save-dev css-loader style-loader

webpack教程参考:
* Webpack 中文指南
* React结合Webpack使用

配置文件介绍

此次项目是在 《React 边写边学 2:使用Babel》 基础上展开的。

  • webpack.config.js 文件
var path = require('path');
var webpack = require('webpack');
var CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  entry: './src/index.jsx', // 入口文件,单入口 index.jsx 文件
  output: { path: __dirname, filename: 'bundle.js' }, // 编译到的文件
  module: {
    loaders: [ // 使用特定的加载器 loader 处理特定的文件
      {
        test: /.jsx?$/, // 文件过滤规则
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'] // es2015 处理 ES6 语法,react 处理 jsx 语法
        }
      },
      
      {test: /\.css$/, loader: 'style!css'}
    ]
  },
  plugins:[
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      }),
      
      new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
  ]
};

文件格式与结构与说明:

  • package.json 文件
{
  "name": "3_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.jsx",
  "scripts": {
    "start": "webpack-dev-server -p --hot --progress --colors"
  },
  "author": "Guixue",
  "license": "ISC",
  "devDependencies": {},
  "dependencies": {
    "babel": "^6.5.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "compression-webpack-plugin": "^0.3.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

将 package.json文件放根目录后,安装依赖的npm库。

npm  install

执行并运行

执行webpack

npm  start

浏览器 输入 http://localhost:8080/ 即可查看效果。

总结

本文通过引入webpack 达到了 对React 项目自动化管理的目的,当然这只是简单的管理,更复杂的配置和应用可以参考 github webpack/react-starter, 到此为止,我们才完成React项目开发环境的搭建。请继续关注《React边做边学》系列其他内容。