How to set up webpack?

Question

JavaScript

Hello everyone
Do not go out to configure the webpack config
I need to compile the code that is in the directory
for example:
App
_App.js
_bootstrap.css
gives an error

ERROR in ./src/client.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App        from './components/App';
|
> ReactDOM.render(<App />, document.getElementById('react-view'));
|
|
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8050 webpack/hot/dev-server babel-polyfill ./src/client.js

webpack config

global.Promise         = require('bluebird');

var webpack            = require('webpack');
var path               = require('path');
var ExtractTextPlugin  = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var publicPath         = 'http://localhost:8050/public/';
var cssName            = process.env.NODE_ENV === 'production' ? 'styles-[hash].css' : 'styles.css';
var jsName             = process.env.NODE_ENV === 'production' ? 'bundle-[hash].js' : 'bundle.js';

var plugins = [
  new webpack.DefinePlugin({
    'process.env': {
      BROWSER:  JSON.stringify(true),
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  }),
  new ExtractTextPlugin(cssName)
];

if (process.env.NODE_ENV === 'production') {
  plugins.push(
    new CleanWebpackPlugin([ 'public/' ], {
      root: __dirname,
      verbose: true,
      dry: false
    })
  );
  plugins.push(new webpack.optimize.DedupePlugin());
  plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}

module.exports = {
 entry: ['babel-polyfill', './src/client.js'],
 // debug: process.env.NODE_ENV !== 'production',
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx'],
  },
   plugins: [
     new webpack.LoaderOptionsPlugin({
       debug: true
     })
   ],
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: jsName,
    publicPath
  },
  module: {
    rules: [
   {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!less-loader')
      },
      { test: /\.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
      { test: /\.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
      { test: /\.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
      { test: /\.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
      { test: /\.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : null,
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' }
  }
};

Answer 1

You need to include babel (the corresponding loader ) otherwise commands like import will not be processed. The link above has an example of usage.
PS You may need to specify the file extension in import

Answer 2

Hey, I'm not very savvy with webpack, so if I need one, I create a new project and use a template that already has webpack configured. I use visual studio, but if you use another ide, you can download a customized template from github

Answer 3

test: /\.jsx?$/,
loader: 'babel-loader'
.babelrc presets env & react
And npm i --save-dev all of them respectively

Answer 4

/<img[^>]+src[^>]+>/