配置 .babelrc 不起作用

[littlee]

尝试了 1.x 和 2.x 两个不同版本的配置，console 还是有提示 You are using prebuilt antd,...

antd 1.11.2 + babel-plugin-antd 0.5.1

{
  "presets": ["es2015", "react", "stage-0"],
  "env": {
    "development": {
      "plugins": [
        ["antd", {
          "style": "css"
        }]
      ]
    }
  }
}

antd 2.0.1 + babel-plugin-import 1.0.1

{
  "presets": ["es2015", "react", "stage-0"],
  "env": {
    "development": {
      "plugins": [
        ["import", {
          "libraryName": "antd",
          "libraryDirectory": "lib",
          "style": "css"
        }]
      ]
    }
  }
}

[zmGitHub]

我这边也遇到了

[huliyou]

我也遇到了同样的问题

[afc163]

不要再 vendors 里设置 antd

[littlee]

@afc163 请问是指哪里的 vendor ？webpack ？

[zmGitHub]

是的 如果在 vendors 里面加入了 ant import这个插件就不起作用了 导致打包后还是2M 多

[littlee]

👌

[Ben07]

+1
webpack的code splitting和这个插件无法共同使用

[sym900728]

@Ben07 怎么解决的？

[Ben07]

@sym900728 2个entry，app和vendor，按webpack的文档来说，antd应该会打包在vendor上，但是这样和这个import插件有冲突。所以我把antd放在了app中。一个不好的就是app.js文件会变大。但是里面只包含antd使用了的组件的代码。总体文件大小相对来说是减少的。

[sym900728]

@Ben07 我的用 webpack2 。在 app 里面加入 antd 并没有起作用。

const path = require('path')
const project = require('./project.config')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const webpackConfig = {
  name: 'client',
  target: 'web',
  devtool: project.webpackDevConfig.devtool,
  cache: true,
  context: path.join(project.basePath, 'src'),
  resolve: {
    modules: [
      path.join(project.basePath, 'src'),
      'node_modules'
    ]
  }
}

/* =================================================== entry ================================================= */
webpackConfig.entry = {
  app: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:' + project.serverPort,
    'webpack/hot/only-dev-server',
    'antd',
    './index.js',
  ],
  vendor: [
    'babel-polyfill',
    'react',
    'react-dom',
    'react-router',
    'react-redux',
    'redux',
    'redux-thunk',
    'axios',
    'lodash',
    'immutable',
    'moment'
  ]
}

webpackConfig.output = {
  filename: '[name].[hash].js',
  path: path.join(project.basePath, 'dist'),
  publicPath: '/'
}

/* ================================================= loaders ================================================== */
// not use less file, if you want to use less file, you must add the less-loader module and configure it.
// json-loader is not required anymore

webpackConfig.module = {}

// webpack1 is webpackConfig.module.loaders. but webpack2 is webpackConfig.module.rules
webpackConfig.module.rules = [{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [{loader: 'babel-loader', options: {cacheDirectory: true}}]
}]

// css-loader: https://github.com/webpack-contrib/css-loader
// postcss-loader: https://github.com/postcss/postcss-loader
webpackConfig.module.rules.push({
  test: /\.css$/,
  use: [
    {loader: 'style-loader'},
    {loader: 'css-loader', options: {modules: true, sourceMap: true, importLoaders: 1, minimize: false}},
    {loader: 'postcss-loader'}
  ]
})

webpackConfig.module.rules.push({
  test: /\.scss/,
  use: [
    {loader: 'style-loader'},
    {loader: 'css-loader', options: {modules: true, sourceMap: false, importLoaders: 1, minimize: false}},
    {loader: 'postcss-loader'},
    {loader: 'sass-loader', options: {sourceMap: true}}
  ]
})

webpackConfig.module.rules.push({
  test: /\.(png|jpg)/,
  use: [{loader: 'url-loader', options: {limit: 8912}}]
})

webpackConfig.module.rules.push({
  test: /\.(ttf|eot|svg|woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  use: [{loader: 'file-loader'}]
})

/* ================================================= plugins =============================================== */
// The description of the html-webpack-plugin at https://github.com/ampedandwired/html-webpack-plugin
webpackConfig.plugins = [(
  new HtmlWebpackPlugin({
    template: 'index.html',
    hash: false,
    filename: 'index.html',
    inject: 'body',
    minify: {
      collapseWhitespace: false
    }
  })
)]

webpackConfig.plugins.push(
  new webpack.LoaderOptionsPlugin({
    options: {
      context: project.basePath
    }
  })
)

webpackConfig.plugins.push(
  new webpack.HotModuleReplacementPlugin()
)

// prints more readable module names in the browser console on HMR updates
webpackConfig.plugins.push(
  new webpack.NamedModulesPlugin()
)

// WARNING in webpack: Using NoErrorsPlugin is deprecated. Use NoEmitOnErrorsPlugin instead.
webpackConfig.plugins.push(
  new webpack.NoEmitOnErrorsPlugin()
)

// Tells React to build in either dev or prod modes.
webpackConfig.plugins.push(
  new webpack.DefinePlugin({
    __DEV__: true,
    'process.env.NODE_ENV': JSON.stringify('development')
  })
)

webpackConfig.plugins.push(
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity
  })
)

module.exports = webpackConfig

Last login: Mon May 8 13:52:45 on ttys002
SymMacBookPro:pds-mobile-web sym$ yarn start
yarn start v0.23.2
$ better-npm-run start:dev
running better-npm-run in /Users/sym/Workspace/CompanyProject/pds-mobile-web
Executing script: start:dev

to be executed: node bin/server.js
app:bin:server Project environment: development +0ms
app:bin:server Project analyze: false +2ms
app:bin:server Server is now running at http://localhost:3000. +378ms
Hash: 353e2c1f46a51a892cae
Version: webpack 2.5.1
Time: 17510ms
Asset Size Chunks Chunk Names
app.353e2c1f46a51a892cae.js 10.2 MB 0 [emitted] [big] app
vendor.353e2c1f46a51a892cae.js 6.78 MB 1 [emitted] [big] vendor
index.html 741 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.48 MB 0
webpack: Compiled successfully.

[Ben07]

@sym900728
抱歉我没有描述清楚，我说的放app里，不是显示的放到app entry中
还有我个人建议，开发和打包，分成两个配置文件
尝试

app: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:' + project.serverPort,
    'webpack/hot/only-dev-server',
    'antd', //----------这一行去掉--------------
    './index.js',
  ],

在loaders中添加

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
        plugins: [["import", {
            "libraryName": "antd",
            "style": true
        }]],
        presets: ["react", "es2015"]
    }
}

我比较好奇你看了官方文档了吗？关键的这段都没有看到

plugins: [["import", {
    "libraryName": "antd",
    "style": true
}]],

[sym900728]

@Ben07 我在这里加了这个。
.babelrc 文件中。

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-1"
  ],
  "plugins": [
    ["import", {"libraryName": "antd", "style": true}],
    "react-hot-loader/babel",
    "transform-decorators-legacy",
    ["babel-plugin-root-import", [{
      "rootPathPrefix": "~",
      "rootPathSuffix": "src"
    }, {
      "rootPathPrefix": "@",
      "rootPathSuffix": "src/routes/Admin"
    }
  ]]
  ]
}

[sym900728]

@Ben07 上面的webpack配置是开发模式的。生产模式代码并没有粘贴上去。

[Ben07]

@sym900728 开发模式我没有管代码分不分离，没这个必要。打包的时候代码分离才有意义。看你写法感觉没问题，可能是和别的plugins冲突了吧。你要不先试下最精简的。

[sym900728]

@Ben07 因为用到的东西太多。我试试删除掉别的。留下最简单的。

[chenfanggm]

@sym900728
2.11.1的npm antd没有.css文件