Question

我是React和Webpack的新手以及所有这些东西。我已经使用Webpack创建了一个React应用程序，并使用webpack-dev-server来创建和调试我的应用程序。

所以在我的webpack.config.js文件中我有这段代码：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      },
      {
        test: /\.scss$/,
        use: debug ? [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }] : ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" })
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new ExtractTextPlugin('style.min.css'),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
  externals: {
    "jquery": "jQuery",
    "react": "React",
    "react-dom": "ReactDOM",
    "animejs": "anime"
  }
};

当我使用webpack-dev-server --content-base src --inline --hot时，我看到我的应用程序在localhost：8080中运行，但现在我想让应用程序准备好进行生产。所以我在终端上运行了这些代码：

$: NODE_ENV=production
$: webpack

它没有改变任何东西！所以第一个问题：NODE_ENV=production出了什么问题？当我将我的webpack的第一行更改为var debug = process.env.NODE_ENV === "production"; //false时，它可以正常工作。

还有其他问题！我使用sass和debug === false时我在浏览器中打开index.html文件，我的样式没有被编译！我的所有sass代码都被复制到style.min.css文件。问题应该是这部分代码：

{
    test: /\.scss$/,
    use: debug ? [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }] : ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" })
}

最后一个问题是绝对路径！我在我的应用程序中有这个代码：

<img src="/images/avatar.jpg">

当我使用webpack-dev-server时它可以工作，但是当我使用webpack时，找不到图像，因为它试图从我的linux的根目录打开它。

所以这些是我的问题：

为什么NODE_ENV =生产无效？
我应该如何编译sass并将css放入style.min.css？
如何在我的应用中使用绝对路径？

提前致谢

Answer 1

我应该如何编译sass并将css放入style.min.css？

尝试以下配置

{
    test: /\.scss$/,
    use: debug ? [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }] : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                modules: true,
                            },
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                modules: true,
                            },
                        },
                    ],
                }),
            },

如何在我的应用中使用绝对路径？

在react app中导入图像的更好方法是在webpack中使用文件加载器，然后直接导入应用程序中的图像，就像导入其他模块一样。首先在webpack中添加文件加载器，如下所示

{
  test: /\.(jpg|png)$/,
  loader: "file-loader",
},

然后是webpack中服务器的公共路径

output: {
    path: __dirname + "/src/",
    publicPath: "http://localhost:3000/static",  // Your server public path
    filename: "client.min.js"
  },

然后直接导入图像并像这样输入src

import avatar from "../images/avatar.jpg";

<img src={avatar} />

如何使用webpack准备好应用程序

1 个答案: