webpack/node

webpack3构建react工程

Posted by Mia Yu on July 23, 2017

第一个构建的工程中使用的webpack还是1.x版本的 昨天新建个工程打算学习下g2的数据可视化开发：

npm install --save-dev webpack

安装的webpack都已经是最新的3.3.0版本，不得不说学习的速度永远赶不上技术更新的速度啊。 既然webpack已经下了最新版，那我就把react、babel等都安装了最新版等包，动手前确保你的node，npm版本是否支持最新的这些包，我的node 6.10.0， npm 3.10.10够跑了，给个参考，构建过程中还是踩过不少坑的。 先看下工程目录结构：

|-build  //生产环境的打包文件
|-dev  //开发环境的打包文件
|-node-modules
|-src
  |-app.js  //打包的主js
  |-router.js  //工程路由配置
|-.babelrc 
|-.gitignore
|-package.json
|-README.md
|-webpack.config.js  //webapck开发环境配置
|-webpack.pro.config.js  //webapck生产环境配置

接下来讲解搭建步骤：

  1. 首先看下package.json： 
    {
  "name": "g2-demo",
  "version": "0.0.1",
  "description": "",
  "dependencies": {
 "babel-runtime": "^6.23.0",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-router": "^4.1.2"
  },
  "devDependencies": {
 "babel": "^6.23.0",
 "babel-cli": "^6.24.1",
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-es2016": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "css-loader": "^0.28.4",
 "file-loader": "^0.11.2",
 "html-webpack-plugin": "^2.29.0",
 "less": "^2.7.2",
 "less-loader": "^4.0.5",
 "react-hot-loader": "^1.3.1",
 "style-loader": "^0.18.2",
 "url-loader": "^0.5.9",
 "webpack": "^3.3.0",
 "webpack-dev-server": "^1.16.5"
  },
  "scripts": {
 "start": "webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base dev",
 "build": "webpack --progress --profile --colors --config webpack.pro.config.js"
  },
  "author": "mia yu",
  "license": "ISC"
}
  2. 配置开发环境webpack.config.js： 
    var webpack = require('webpack');
var path = require('path');
module.exports = {
 plugins: [
   new webpack.optimize.ModuleConcatenationPlugin(),
   new webpack.LoaderOptionsPlugin({
     minimize: true
   })
 ],
 entry : {
     main : path.resolve(__dirname,'./src/app.js'),
},
 output:{
     path: path.resolve(__dirname,'./dev'),
     filename: 'bundle.js'
 },
 module: {
     rules: [
         {test: /\.less/, use: ['style','css','less']},
         { test: /\.css$/, use: ['style','css'] },
         { test: /\.(png|jpg|jpeg)$/, use: ['url']},
         {test: /\.js$/,
           exclude: /(node_modules|bower_components)/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['es2015', 'react'],
             }
           }
         }
     ]
 },
 resolve: {
     extensions: [ '.js', '.json', '.scss','.less','jsonp'],
 },
 devServer:{
     inline:true,
     port:3000,
     // host:'192.168.199.237'
 }
};

    因为webpack更新后API的变化，所以有些配置的语法也要变化：比如loaders更名为rules，多个loader可以用use字段以数组的形式表示, entry需要申明为对象类型, resolve.extensions里的配置避免’‘（空串），会报错～等等。

  3. babel的配置值得注意一下，在.babelrc文件中，需要将配置改为： 
    {
  "presets": [
 "react",
 [ "es2015", { "modules": false } ]
  ]
}

4.生产环境配置webpack.pro.config.js

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize:true}),
        // new webpack.optimize.CommonsChunkPlugin('common'),
        new HtmlWebpackPlugin({
            title:"g2-demo",
            filename:'index.html',
            template:'./src/index.html' ,     //Load a custom template 
            // chunks:['common.js']
        }),
        new webpack.DefinePlugin({
            "process.env":{
                NODE_ENV:JSON.stringify('production')
            }
        })
    ],
    entry:{
        app:path.resolve(__dirname,'./src/app.js'),
        // common:['react', 'g2']
    },
    output:{
        path: path.resolve(__dirname,'./build'),
        filename: 'bundle.js'
        //filename: '[name].js'
    },
    module: {
        rules: [
            {test: /\.less/, use: ['style','css','less']},
            { test: /\.css$/, use: ['style','css'] },
            { test: /\.(png|jpg|jpeg)$/, use: ['url']},
            {test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react'],
                }
              }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.json', '.scss','.less','jsonp']
    }
};

我配置的是把所有的js都打包成一个文件：bundle.js，如果需要把三方包的js抽出来，可以在entry里配置common，在plugin里声明一个：

new webpack.optimize.CommonsChunkPlugin('common'),
注意一下：新版本的webpack中，CommonsChunkPlugin插件里提示仅支持一位参数

然后将output里filename写成[name].js即可

这样基于webpack3.3.0的react工程就搭建好了

附上源码链接：https://github.com/yomonah/g2-demo

CATALOG
    FRIENDS