如何使用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 var debug = process.env.NODE_ENV === "production"; //false可以正常工作。

還有其他問題！ 我正在使用sass，並且當debug === false ，我在瀏覽器中打開index.html文件，我的樣式未編譯！ 我所有的style.min.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: "css-loader" })
}

最后一個問題是絕對路徑！ 我的應用程序中包含以下代碼：

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

當我使用webpack-dev-server時它可以工作，但是當我使用webpack時，找不到圖像，因為它試圖從linux的根目錄打開它。

所以這是我的問題：

1. 為什么NODE_ENV =生產不起作用？
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} />