vue项目webpack如何把src/assets/下的js文件一起打包

Question

vue项目静态资源放在src/assets下,

文件打包之后好像assets/js下的js没有生效，没有打包进来，但是图片和css是打包进来的，想问下大家知道这时什么原因吗？

不知道这个需要在webpack哪个里配置一下？

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var webpack = require("webpack")

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'),resolve('node_modules/vue-bulma-tooltip')]
        /*include: [
          '/src/',//表示在src目录下的js需要编译
        ]*/
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: [
          '/src/',//表示在src目录下的css需要编译
          '/node_modules/mint-ui/'  //增加此项
        ]
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader!postcss-loader!px2rem-loader',
        include: [
          '/src/',//表示在src目录下的css需要编译
          '/node_modules/mint-ui/'  //增加此项
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ],
  }
}

上面是webpack.base.conf.js

Answer 1

看一下项目根目录下的 statics 目录下有文件吗？

Answer 2

如果没有被vue引用，应该不会被打包，可以在entry加入单独打包，类似如下，
我的js是放在src/下的，要指定好路径

Answer 3

试下这个插件copy-webpack-plugin：

 ...
 new CopyWebpackPlugin([{
        from: __dirname + 'src/assets'
    }]),

可以将src/assets目录下的文件全部复制到编译目录下

Answer 4

文件打包的时候，是从入口文件，也就是你写的entry 里的main.js文件进入，然后你把用到的js文件通过 import('')的方式引入 才会output输出到指定目录。建议把webpack的基本语法看一下