webpack 配置使用

var webpack = require("webpack");
var buildPath = __dirname + "/build";
var path = require('path');

module.exports = {
    devtool: false,
    entry: {
        mainEntry: ['babel-polyfill',__dirname + "/app/src/js/pc/entry/mainEntry.js"]
        // vendor: ['react','react-dom','react-router']
    },
    output: {
        path: path.join(__dirname + "/app/build/js"),
        filename: "[name].js",
        publicPath:"../js/",//配置公共路徑
        chunkFilename: '[name].js'
    },
    debug: true,
    module: {
        loaders: [
            { test: /\.js[x]?$/, loaders: ['babel'] },
            { test: /\.css$/, loader: "style!css" },
            {test: /\.scss/,loader: 'style-loader!css-loader!sass-loader'},
            // { test: /\.(css|less)$/, loaders: ['style-loader', 'css-loader?localIdentName=[local]-[hash:base64:5]', 'postcss-loader', 'less-loader'] },
            // { test: /\.scss$/, loaders: ['style-loader', 'css-loader?modules&localIdentName=[local]-[hash:base64:5]', 'postcss-loader', 'sass-loader'] },
            { test: /\.(ttf|eot|woff|woff2|otf|svg)/, loader: 'file-loader?name=./font/[name].[ext]' },
            { test: /\.json$/, loader: 'file-loader?name=./json/[name].json' },
            { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin()//壓縮
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            except: ['exports', 'require']
        }),
        //必須配置，react的公共模塊
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ['vendor'],
        //     filename: 'vendor.js'
        // }),
        //取消使用壓縮插件瀏覽器警告提示
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ],
    resolve:{//配置別名，在項目中可縮減引用路徑
        alias: {
            rootPath: __dirname,
            scripts: __dirname + "/app/src/js/",
            ajax : __dirname + "/app/src/js/common/ajaxCom.js"
        },
        extensions:["",".js",".jsx"]// 如今你require文件的時候能夠直接使用require('file')，不用使用require('file.js')
    }
    
    // externals: {
    //     "react": 'React',
    //     'react-dom': 'ReactDOM'
    // }
};

View Code

package.json 說明

{
  "name": "React",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {//啓動文件 npm run build
    "build": "webpack",
    "build-dev": "webpack -w -d"
  },
  "author": "tets",
  "license": "ISC",
  "description": "tets",
  "dependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-1": "^6.22.0",
    "babel-polyfill": "^6.16.0",
    "fastclick": "^1.0.6",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-tap-event-plugin": "^2.0.1",
    "jsx-loader": "^0.13.2",
    "flux": "latest",
    "gulp": "^3.9.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rev": "^7.0.0",
    "gulp-sass": "^2.3.1",
    "keymirror": "latest",
    "koa": "^1.2.0",
    "koa-body": "^1.4.0",
    "koa-ejs": "^3.0.0",
    "koa-favicon": "^1.2.1",
    "koa-router": "^5.4.0",
    "koa-session": "^3.3.1",
    "koa-static": "^2.0.0",
    "object-assign": "latest",
    "react-router": "^2.4.1",
    "webpack": "^1.13.1"
  },
  "devDependencies": {
    "antd": "^2.7.2",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^3.0.0",
    "imagemin-pngcrush": "^5.0.0",
    "koa-mongo": "^0.7.0",
    "postcss-loader": "^1.3.2",
    "react-slick": "^0.14.6",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-1"
    ],
    "plugins": [
      "transform-object-assign",
      [
    //antd按需加載css
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }
}

View Code