@alicd/crui-checkbox-field/webpack.config.babel.js

复选框， FormItem + Checkbox【 @alicd/next 】 的功能融合，同时支持了 x-bind 双向绑定， rules 规则配置，name 表单 name 属性

import path     from 'path'
import merge    from 'webpack-merge'
import webpack  from 'webpack'
import fs       from 'fs'
import mkdirp   from 'mkdirp'
import sass     from 'node-sass'
import pkg      from './package.json'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const env = process.env.NODE_ENV || 'development'
const pkgName = pkg.name || '@alicd/custom-component'
const nameArr = pkgName.split('/')
const entryName = nameArr[nameArr.length-1]

let config = {}


const common = {
  module : {
    rules : [
      {
        test : /\.jsx?$/,
        exclude : /node_modules/,
        use : ['babel-loader']
      },
    ]
  },

  externals : {
    'react' : 'React',
    'react-dom' : 'ReactDOM'
  },

  resolve: {
    extensions: ['.js', '.jsx']
  }
}

if(env === 'development'){
  config = merge(common, {
    entry : {
      'app' : path.resolve(__dirname,'examples/app.jsx')
    },
    output : {
      filename : '[name].js',
      path : path.resolve(__dirname,'site'),
      sourceMapFilename: '[file].map'
    },
    module : {
      rules : [
        {
          test : /\.scss|css$/,
          use : ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    },

    plugins : [
      new HtmlWebpackPlugin({
        template : path.resolve(__dirname,'examples/index.html'),
        inject : 'body'
      })
    ],

    devtool: 'cheap-eval-source-map',
    devServer: {
      contentBase: path.resolve(__dirname,'site'),
      compress: true,
      port: 9000
    }
  })
}

if(env === 'demo'){
  /**
   *@Make demo prepare file
   */
  mkdirp.sync('./_data');

  const files = fs.readdirSync('./docs');
  const outputPath = './_data/demo-list.js'

  let content =
    'import React from "react";\n' +
    'import ReactDOM from "react-dom";\n' +
    'let demos = [';


  files.forEach(function(filename){
    if(/md$/.test(filename)){
      const requirePath = `../docs/${filename}`
      content += `\n   require('${requirePath}'),`
    }
  })

  content += '\n  ];\n';

  content +=
    'demos.forEach((demo) => {\n' +
    ' if (typeof demo.preview !== "function") return;\n' +
    ' demo.preview = demo.preview(React, ReactDOM);\n' +
    '});';
  content += 'export default demos;';

  fs.writeFileSync(outputPath, content);


  // demo webpack config
  config = merge(common, {
    entry : {
      'demo' : path.resolve(__dirname,'examples/demo.jsx'),
      'style': path.resolve(__dirname, 'src/style.js')
    },
    output : {
      filename : '[name].js',
      path : path.resolve(__dirname,'site'),
      sourceMapFilename: '[file].map'
    },
    module : {
      rules : [
        {
          test : /\.scss|css$/,
          use : ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test : /\.md$/,
          exclude : /node_modules/,
          use : ['babel-loader',{loader : 'md-meta-loader', options: {demoDir : 'docs'}}]
        }
      ]
    },

    plugins : [
      new webpack.NormalModuleReplacementPlugin(
        new RegExp(pkgName),
        path.resolve("./src/index.jsx")
      ),
      new HtmlWebpackPlugin({
        template : path.resolve(__dirname,'examples/index.html'),
        inject : 'body'
      })
    ],

    devtool: 'cheap-eval-source-map',
    devServer: {
      contentBase: path.resolve(__dirname,'site'),
      compress: true,
      port: 9000
    }
  })
}

if(env === 'production'){
  config = merge(common, {
    entry : {
      [entryName] : [path.resolve(__dirname, 'src/style.js'), path.resolve(__dirname, 'src/index.jsx')]
    },
    output : {
      filename : '[name].js',
      path : path.resolve(__dirname, 'dist'),
      libraryTarget: "umd",
      library: pkgName,
      sourceMapFilename: '[file].map',
      publicPath : '/'
    },
    module : {
      rules : [
        {
          test : /\.css|scss$/,
          use : ExtractTextPlugin.extract({
            fallback : 'style-loader',
            use : ['css-loader', 'sass-loader']
          })
        }
      ]
    },
    devtool: 'source-map',
    plugins : [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap : true,
        compress: {
          warnings: false,
          drop_console: false,
        }
      }),
      new ExtractTextPlugin('[name].css')
    ]
  })

  /*
   *@parse sass file to css
   */
  const scssDir = './assets/'

  fs.readdir(scssDir, (err, files) => {
    if(err ) throw err

    files.forEach(file => {
      if(/scss$/.test(file)){
        sass.render({
          file: `${scssDir}${file}`,
          importer: function(url, prev, done) {
            if (url[0] === '~') {
              url = path.resolve('node_modules', url.substr(1));
            }

            return { file: url };
          },
          includePaths: [ 'node_modules/', 'assets/' ]
        }, (error, result) => {
          if(!error){
            fs.writeFile(`${scssDir}${file.split('.')[0]}.css`, result.css.toString())
          }
        })
      }
    })
  })

}

export default config