将 JS 文件与 webpack 脚本捆绑在一起？

Question

我是 webpack 的超级新手，我似乎没有找到一种方法来捆绑 JS 文件，就像我用 Gulp 那样以一种非常简单的方式。我一直在搜索，但没有找到任何直接的答案。

现在我正在 package.json 文件中使用创建两个缩小的文件，但我更希望有一个：

"scripts": {
    "stand-alone": "concurrently 'webpack --config=webpack.config.js src/whatever.vue demos/build.min.js --output-library=whatever1'  'webpack --config=webpack.config.js src/whatever2.js demos/mixin.min.js --output-library=whatever2'",
},

然后我的 webpack.config.js 看起来像这样：

const webpack = require('webpack');

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: false,
      }
    })
  ],
};

Answer 1

我相信您正在寻找 entry points。

在您的 webpack.config.js 模块导出对象中：

定义 entry 属性:

 entry: {
    app: ['./path/to/file.js', './path/to/file2.js'],
  },

定义 output 属性:

 output: {
   path: '/path/to/assets', // ex. '../../wwwroot/dist'
   filename: '[name].js', // Substitutes [name] with the entry name, results in app.js
   publicPath: '/'
 },

将您的脚本更改为：

"scripts": {
    "stand-alone": "webpack --config=webpack.config.js",
},

如果你使用的是Vue + Webpack，我建议你看看vue-cli并使用webpack模板生成一个项目。它更高级，但您可以查看文档并了解您缺少的内容。

运行如下：

npm install -g vue-cli // install vue cli globally

vue init webpack my-project // create a sample project

如果你想生成多个输出文件，你可以像这样有多个入口点：

  entry: {
    app: ['./path/to/file.js', './path/to/file2.js'],
    mixins: './path/to/mixins.js',
    vendors: ['./path/to/vendor.js', './path/to/vendor2.js']
  },

这将写入磁盘 ./path/to/assets/app.js、./path/to/assets/mixins.js、/path/to/assets/vendors.js。

将 JS 文件与 webpack 脚本捆绑在一起？

Bundle JS files with webpack scripts?

javascript

npm

webpack

bundle

npm-scripts