Question

我在npm上发布一个React组件作为webpack包，我按照库指南使用externals和webpack-node-externals告诉webpack不要捆绑组件所依赖的库（React for例）。我的捆绑包现在相当小但是我注意到样式加载器仍然存在，有没有办法告诉webpack不要捆绑style-loader并依赖将导入我的项目的style-loader库/组件？

Answer 1

    webpack.config.js

   "use strict";
    var webpack = require('webpack');
    var path = require('path');
    var loaders = require('./webpack/loaders');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var DashboardPlugin = require('webpack-dashboard/plugin');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');

    const HOST = process.env.HOST || "127.0.0.1";
    const PORT = process.env.PORT || "5000";

    const paths = {
      SRC:path.resolve(__dirname,'src'),
      HOT_RELOADER:'react-hot-loader/patch'
    }

    module.exports = {
      entry: [
        // your app's entry point
        paths.HOT_RELOADER,
        path.join(paths.SRC,'index.jsx')
      ],
      devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
      output: {
        publicPath: '/',
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
      },
      resolve: {
        extensions: ['.js', '.jsx']
      },
      module: {
        rules : loaders
      },
      devServer: {
        contentBase: "./public",
        // do not print bundle build stats
        noInfo: true,
        // enable HMR
        hot: true,
        // embed the webpack-dev-server runtime into the bundle
        inline: true,
        // serve index.html in place of 404 responses to allow HTML5 history
        historyApiFallback: true,
        port: PORT,
        host: HOST
      },
      plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin({
          filename: 'style.css',
          allChunks: true
        }),
        new DashboardPlugin(),
        new HtmlWebpackPlugin({
          template: './src/index.html',
          files: {
            css: ['style.css'],
            js: ["bundle.js"],
          }
        }),
        new webpack.EnvironmentPlugin({
          NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
        })
      ]
    };



 // loaders.js - used as external loader
 module.exports = [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: ['babel-loader']  
      },
      {
        test: /\.scss$/,
        exclude: ['node_modules'],
        use: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2)$/,
        use: ['url-loader']
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: ['url-loader?limit=10000&mimetype=application/octet-stream']
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: ['url-loader?limit=10000&mimetype=image/svg+xml']
      },
      {
        test: /\.gif/,
        use: ['url-loader?limit=10000&mimetype=image/gif']
      },
      {
        test: /\.jpg/,
        use: ['url-loader?limit=10000&mimetype=image/jpg']
      },
      {
        test: /\.png/,
        use: ['url-loader?limit=10000&mimetype=image/png']
      }
    ]

Webpack加载器作为外部

1 个答案: