kara-reactutil-mobileweb/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 postcssFlexbugsFixes = require('postcss-flexbugs-fixes')
const autoprefixer = require('autoprefixer')
const eslintFriendlyFormatter = require('eslint-friendly-formatter')
const pxtorem = require('postcss-pxtorem')
const utilities = require('postcss-utilities')

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
      ],
      flexbox: 'no-2009',
    }),
    pxtorem({
      rootValue: 16,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
    }),
  ]
}

module.exports = {
  entry: {
    index: ['babel-polyfill', './dev/main.js'],
  },
  output: {
    path: resolve('lib'),
    filename: '[name].js',
    publicPath: '/',
  },
  module: {
    rules: [
      // js 验证
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: require.resolve('eslint-loader'),
        options: {
          formatter: eslintFriendlyFormatter,
        },
      },
      // js 加载解析
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },
      // css加载
      {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: require.resolve('style-loader'),
          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.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')),
  ],
}