kara-rc-web/webpack.dev.config.js

kara项目react组件库

/* eslint-disable import/no-extraneous-dependencies */
const webpack = require('webpack')
const path = require('path')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const WatchMissingNodeModulesPlugin = require('./webpack.util.js')
const utilities = require('postcss-utilities')
const postcssFlexbugsFixes = require('postcss-flexbugs-fixes')
const autoprefixer = require('autoprefixer')
const eslintFriendlyFormatter = require('eslint-friendly-formatter')

function resolve(dir) {
  return path.join(__dirname, './', dir)
}

function postcssPlugin() {
  return [
    utilities({}),
    postcssFlexbugsFixes,
    autoprefixer({
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9', // React doesn't support IE8 anyway
        'iOS >= 8',
      ],
      flexbox: 'no-2009',
    }),
  ]
}

module.exports = {
  entry: {
    index: ['./config/polyfills.js', './dev/main.js'],
  },
  output: {
    path: resolve('lib'),
    filename: '[name].js',
    publicPath: '/',
  },
  resolve: {
    mainFiles: ['index.web', 'index'],
    modules: ['node_modules', path.join(__dirname, '../node_modules')],
    extensions: ['.web.js', '.js', '.json'],
  },
  module: {
    rules: [
      // js 验证
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        include: [resolve('src')],
        exclude: /node_modules/,
        loader: require.resolve('eslint-loader'),
        options: {
          formatter: eslintFriendlyFormatter,
          eslintPath: require.resolve('eslint'),
          baseConfig: {
            extends: [require.resolve('eslint-config-react-app')],
          },
          ignore: false,
          useEslintrc: false,
        },
      },
      // js 加载解析
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: require.resolve('babel-loader'),
        options: {
          cacheDirectory: true,
        },
      },
      // css加载
      {
        test: /\.(css|scss)$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: require.resolve('style-loader'),
            options: {
              sourceMap: true,
            },
          },
          use: [{
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: postcssPlugin,
              sourceMap: true,
            },
          },
          require.resolve('resolve-url-loader'),
          {
            loader: require.resolve('sass-loader'),
            options: {
              sourceMap: true,
            },
          }],
        }),
      },
      // 文件加载
      {
        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        include: [resolve('src')],
        loader: require.resolve('url-loader'),
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev'),
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // 生成CSS文件
    new ExtractTextPlugin({
      filename: getPath => getPath('[name].css'),
      allChunks: true,
    }),
    // 生成页面
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './dev/index.html',
    }),
    // css scss 验证
    new StyleLintPlugin({
      files: ['./src/**/*.s?(a|c)ss'],
      failOnError: false,
    }),

    // 文件大小写问题用到插件来强行报错
    // See https://github.com/facebookincubator/create-react-app/issues/240
    new CaseSensitivePathsPlugin(),

    // 当由于模块缺乏而导致的报错，用插件确保webpack不用重启
    // See https://github.com/facebookincubator/create-react-app/issues/186
    new WatchMissingNodeModulesPlugin(resolve('node_modules')),

    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },
  performance: {
    hints: false,
  },
}