使用webpack连接js文件

时间:2017-04-06 03:19:50

标签: javascript webpack webpack-dev-server

webpack.config.js

const webpack = require('webpack')
const path = require('path')

const extractCommons = new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  filename: './js/commons.js'
})

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('[name].bundle.css')

const publicJS = [
  './js/bootstrap.js',
  './js/fancybox/source/jquery.fancybox.pack.js', 
  './js/flexslider/jquery.flexslider-min.js', 
  './js/bxslider/jquery.bxslider.min.js',
  './js/jquery.validate/jquery.validate.min.js', 
  './js/jquery.validate/additional-methods.min.js', 
  './js/jquery.maskedinput.min.js', 
  './js/jquery.formatDateTime.js',
  './js/gpw-public.js'
];


const config = {
  devtool: 'eval-source-map',
  context: path.resolve(__dirname, ''),
  devServer: {
      proxy: {
        '**': {
          target: 'http://www.gdwv2.com',
          secure: false,
          changeOrigin: true
        }
      }
  },

  entry: {
    './js/theme-selector/gpw-theme-selector.min': './js/theme-selector/gpw-theme-selector.js',
    './pub/public.bundle': publicJS,
  },
  output: {
    path: path.resolve(__dirname, ''),
    filename: '[name].js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg)$/,
      include: path.resolve(__dirname, 'style'),
      use: [{
        loader: 'url-loader',
        options: { limit: 10000 } // Convert images < 10k to base64 strings
      }]
      }, 
      {
        // 
        test: /\.scss$/,
        include: path.resolve(__dirname, 'style'),
        loader: extractCSS.extract(['css-loader','sass-loader'])
      }, 
      {
        // Theme selector
        test: /\.js$/,
        include: path.resolve(__dirname, 'js/theme-selector'),
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] }
        }]
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'js'),
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] }
        }]
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    extractCommons,
    extractCSS
  ]
}

module.exports = config

publicJS数组是一堆供应商文件。这种有效。虽然文件不按它们在数组中的顺序连接,但会生成一些未定义的错误。还要在public.bundle.js文件中从未在之前加载的脚本中定义的scritps中定义的变量中获取未定义的变量错误。要明确:

在myscript.js中定义 - &gt; var foo = "bar";public.bundle.js之后加载myscript.js并尝试使用foo但调用未定义的变量错误。也许我不理解webpackJsonp(...函数webpack脚本被包含在内。

第二个条目是React应用程序。这是按预期工作的。

0 个答案:

没有答案