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

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 的根目录打开它，所以找不到图像。

所以这些是我的问题：

1. 为什么 NODE_ENV=production 不起作用？
2. 我应该如何编译 sass 并将 css 放入 style.min.css 中？
3. 如何在我的应用中使用绝对路径？

提前致谢

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 应用程序中导入图像的更好方法是在 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} />