如何使用Webpack准备应用程序

Question

I'm new to React and Webpack and all this stuff. I've created a React app with Webpack and I used webpack-dev-server to create and debug my app.

So in my webpack.config.js file I have this code:

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"
  }
};

When I use webpack-dev-server --content-base src --inline --hot, I see my app working in localhost:8080 but now I want to make the app ready for production. so I ran these codes in my terminal:

$: NODE_ENV=production
$: webpack

It doesn't change anything! So first question: what is wrong with NODE_ENV=production ? When I change the first line of my webpack to var debug = process.env.NODE_ENV === "production"; //false var debug = process.env.NODE_ENV === "production"; //false it works.

There are other problems! I'm using sass and When debug === false and I open my index.html file in browser, my styles aren't compiled! Just all of my sass code is copied to style.min.css file The problem should be with this part of code:

{
    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" })
}

And the last problem is with absolute paths! I have this code in my app:

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

It works when I use webpack-dev-server but when I use webpack, the image is not found as it tries to open it from the root of my linux.

So these are my questions:

1. why NODE_ENV=production doesn't work?
2. How should I compile sass and put the css in style.min.css?
3. How can I use absolute paths in my app?

thanks in advance

Answer 1

How should I compile sass and put the css in style.min.css?

Try following config

{
    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,
                            },
                        },
                    ],
                }),
            },

How can I use absolute paths in my app?

A better way to import images in react app is using file loader in webpack and then directly importing images in application like you import other modules. First add file-loader in webpack like this

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

and then the public path of your server in webpack

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

Then in directly import image and put in src like this

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

<img src={avatar} />