Question

我有可以理解es6的index.js文件。如果我在同一文件夹中创建另一个文件js文件并创建一些es6，则会出现一些错误。看来我的index.js是唯一获得babel-loader效果的文件。这是我的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"
 }
}

Answer 1

为每个非依赖文件添加入口点。例如。如果one.js导入two.js，那么您只需要一个条目，即one.js 但是如果需要分开使用two.js，则需要定义一个新的入口点。

{...,
    entry: {
        main: './assets/js/one.js',
        two: './assets/js/two.js'
      },
...}

babel loader仅在文件上工作

1 个答案: