搭建css module和cssnext自动刷新开发环境

[zhouwenbin]

先看这张图

实在太爽了，支持css module，保存还自动刷新，很好的开发环境，这个项目来自于ultimate-hot-reloading-example
用法很简单，在命令行输入

git clone https://github.com/glenjamin/ultimate-hot-reloading-example
cd ultimate-hot-reloading-example
npm i
npm start

浏览器打开http://localhost:3000/就可以看到效果了。
用编辑器打开，修改client\components\App.css文件，�样式会实时刷新。
修改client\components\App.js文件，结构是写在js里的，修改结构也能实时刷新。
但是一些css3属性没有加前缀，我们还需要cssnext-loader
在命令行输入

npm install cssnext-loader --save-dev

然后修改webpack.config.js文件

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: '#eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/app.js'
  ],
  output: {
    path: __dirname,
    filename: 'bundle.js',
    publicPath: '/'
  },
  cssnext: {
    browsers: "last 10 versions",
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js'],
    alias: {
      request: 'browser-request'
    }
  },
  module: {
    loaders: [
    // Javascript
    {
      test: /\.js$/,
      loader: 'babel',
      include: path.join(__dirname, 'client'),
      query: {
        optional: ['runtime'],
        plugins: [
          'react-display-name',
          'react-transform'
        ],
        extra: {
          'react-transform': {
            'transforms': [{
              'transform': 'react-transform-hmr',
              'imports': ['react'],
              'locals': ['module']
            }]
          }
        }
      }
    },

    // CSS
    {
      test: /\.css$/,
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[path][name]-[local]!cssnext-loader'
    }

    ]
  }
};

加了两行代码

cssnext: {
    browsers: "last 10 versions",
  },

和

loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[path][name]-[local]!cssnext-loader'

然后在重新npm start一下，会生成各种前缀了。而且他不会生成编译过的文件，目录结构依然很清爽。