загрузчик babel работает только с файлом

1

У меня есть файл index.js, который понимает es6. Если я создам другой файл js файла в той же папке и создаю несколько es6, я получаю некоторые ошибки. Кажется, мой index.js - единственный, который получает эффекты моего загрузчика бабелей. вот мой webpack.config.js У меня не будет возможности импортировать экспорт из разных js файлов, но я не уверен, что случилось

Конфигурация Webpack:

'use strict';
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

let FaviconsWebpackPlugin = require('favicons-webpack-plugin');

const NODE_ENV = process.env.NODE_ENV;

const buildingForLocal = () => {
  return (NODE_ENV === 'development');
};

const config  = {
  mode: buildingForLocal() ? 'development' : 'production',
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: './assets/js/index.js'
  },
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'assets/js/[name].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      "node_modules"
    ]
  },
  devServer: {
    quiet: true
  },
  devtool: buildingForLocal() ? 'cheap-module-eval-source-map' : undefined,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true
          }
        }
      },
      {
        test: /\.pug$/,
        loaders: 'pug-loader',
        // Add this option to disable minification when building
        query: {
          pretty: true
        }
      },
      {
        test: /\.(scss|css)/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                url: true,
                sourceMap: true,
                minimize: true
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: [
                  // Generate vendor prefixes
                  require('autoprefixer')({
                    'browsers': ['> 1%', 'last 2 versions']
                  })
                ]
              },
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true
              }
            }
          ]
        })
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 40000,
              name: '[name].[ext]',
              outputPath : 'assets/images/',
              publicPath : function(path){
                  return '../images/' + path;
              }
            }
          }
        ]
      },
      {
        test: /\.(ttf|otf|eot|woff|woff2|svg)$/,
        loader: "file-loader",
        options: {
          name: '[name].[ext]',
          outputPath : 'assets/fonts/',
          publicPath : function(path){
              return '../fonts/' + path;
          }
        }
      }
    ]
  },
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
    new FaviconsWebpackPlugin({
      logo: './assets/images/morty.png',
      persistentCache: true,
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        opengraph: false,
        twitter: false,
        yandex: false,
        windows: true
      }
    }),
    new ExtractTextPlugin('./assets/css/style.css'),
    new CopyWebpackPlugin([
      {
        from:'./assets/images',
        to:'./assets/images',
        ignore: ['.*']
      }
    ]),
    new CopyWebpackPlugin([
      {
        from:'./assets/fonts',
        to:'./assets/fonts',
        ignore: ['.*']
      }
    ]),
    new HtmlWebPackPlugin({
      template: "./pug/index.pug",
      filename: "index.html",
      inject: true,
      chunksSortMode: 'dependency'
    }),
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost:8080/'
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false
      }
    )
  ]
}

if (NODE_ENV === 'production') {
  module.exports.devtool = 'source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
  ])
  config.optimization.minimizer = [
    new UglifyJsPlugin({
      cache: true,
      parallel: true,
    })
  ]
}

module.exports = config;

package.json

{
   "name": "ts",
   "version": "1.0.0",
   "description": "This is a simple webpack 4 setup to build simple 
   static sites",
   "main": "index.js",
   "scripts": {
    "clean": "rimraf dist",
    "dev": "webpack-dev-server --progress --hide-modules --mode 
     development",
    "build": "npm run clean && webpack --hide-modules --mode production"
    },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "browser-sync": "^2.24.5",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "favicons-webpack-plugin": "0.0.9",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
     "imagemin-webpack-plugin": "^2.1.5",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
   "style-loader": "^0.21.0",
   "webpack": "^4.14.0",
   "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
 }
}
  • 1
    Является ли ваш файл B зависимостью от src / assets / js / index.js?
Теги:
webpack
webpack-4

1 ответ

1

Добавьте точку входа для каждого файла, которая не является зависимой. Например. если one.js импортирует two.js, тогда вам нужна только одна запись, то есть one.js, но если вам нужно использовать two.js отдельно, вам нужно определить новую точку входа.

{...,
    entry: {
        main: './assets/js/one.js',
        two: './assets/js/two.js'
      },
...}
  • 0
    Ах хорошо. Можно ли сделать что-то вроде main: './assets/js/*.js', чтобы нацелиться на все js?
  • 0
    Нет, но вы можете определить массив источников, которые должны быть связаны вместе, например, main: ['./assets/js/one.js', './assets/js/two.js']

Ещё вопросы

Сообщество Overcoder
Наверх
Меню