@UncleDenn

Как настроить webpack?

Всем привет
Не выходи настроить конфиг вебпака
Мне нужно компилировать код который находится в каталоге
например:
App
_App.js
_bootstrap.css
выдает ошибку
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


конфиг вебпак
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': '*' }
  }
};
  • Вопрос задан
  • 924 просмотра
Решения вопроса 1
Cryden
@Cryden
webdesign, webdevelopment. Мой сайт: fun-wiki.ru
Надо подключить babel (соответствующий loader) иначе команды типа import обрабатываться не будут. По ссылке выше есть пример использования.

P.S. Возможно нужно указать расширение файла в import
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Jeer
@Jeer
уверенный пользователь
Привет, я не очень шарю в вебпаке, поэтому, если он нужен, я создаю новый проект и использую шаблон, в котором уже настроен вебпак. Я пользуюсь visual studio, но, если вы пользуетесь другой ide, можно скачать настроенный шаблон с гитхаба
Ответ написан
Anubis
@Anubis
Люблю корейскую кухню и веб-разработку
test: /\.jsx?$/,
loader: 'babel-loader'

.babelrc presets env & react

Ну и npm i --save-dev их все соответственно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы