Ответы пользователя по тегу Webpack
  • Как работает TS?

    yanis_kondakov
    @yanis_kondakov
    npm install --save-dev babel-loader@8.0.0

    module: {
            rules: [{
                test: /\.(tsx?)|(js)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }],
        }


    Если вы используете jsx файлы, то нужно немного по-другому
    Ответ написан
    Комментировать
  • Как исправить ошибку TypeError: Cannot read property 'invalid' of undefined?

    yanis_kondakov
    @yanis_kondakov
    Вам нужно использовать webpack@4.x.x
    Ответ написан
    Комментировать
  • Как правильно перенести html-файлы с помощью webpack?

    yanis_kondakov
    @yanis_kondakov
    Если я правильно понял, то вы в html файле указали несколько скриптов. Почему нельзя эти скрипты подключать в каком-то одном js файле?

    Вот мой пример вебпака №раз
    spoiler
    const webpack = require('webpack');
    const path = require('path');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    const extractPlugin = new ExtractTextPlugin({
      filename: './assets/css/app.css',
    });
    
    const config = {
      context: path.resolve(__dirname, 'src'),
    
      entry: {
        app: './app.js',
      },
    
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './assets/js/[name]bundle.js',
      },
    
      module: {
        rules: [
          {
            test: /\.js$/,
            include: /src/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['env', 'react', 'stage-1'],
              },
            },
          },
          {
            test: /\.html$/,
            use: ['html-loader'],
          },
          {
            test: /\.sass$/,
            include: [path.resolve(__dirname, 'src', 'assets', 'sass')],
            use: extractPlugin.extract({
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    sourceMap: true,
                  },
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true,
                  },
                },
              ],
              fallback: 'style-loader',
            }),
          },
          {
            test: /\.(jpg|png|gif|svg)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: './assets/media/',
                  publicPath: '../../',
                },
              },
            ],
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: ['file-loader'],
          },
        ],
      },
    
      plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
          template: 'index.html',
        }),
        extractPlugin,
      ],
    
      devServer: {
        contentBase: path.resolve(__dirname, 'dist/assets/media'),
        compress: true,
        port: 12000,
        stats: 'errors-only',
        open: 'true',
      },
    
      devtool: 'inline-source-map',
    };
    
    module.exports = config;



    Пример №два:
    spoiler
    'use strict';
    
    var path = require('path');
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      devtool: 'cheap-module-source-map',
      entry: path.join(__dirname, 'client', 'app.js'),
      resolve: {
        root: [
          path.resolve(__dirname, "client"),
        ],
        extensions: ['', '.js', '.jsx', '.css']
      },
      output: {
        path: path.join(__dirname, '/public'),
        filename: 'bundle.js',
        publicPath: '/'
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: path.join(__dirname, 'client', 'index.tpl.html')
        }),
    
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                screw_ie8: true
            },
            comments: false
        })
      ],
      module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            include: path.join(__dirname, 'client')
          }, 
          {
            test: /\.css$/,
            loader: 'style!css',
            include: path.join(__dirname, 'client')
          },
          ,
          { 
            test: /\.styl$/, 
            include: path.join(__dirname, 'client'),
            loader: 'style-loader!css-loader!stylus-loader'
          }
        ]
      }
    }
    Ответ написан
    Комментировать