如何将Webpack 3.8.1添加到Vue项目中

Question

说我去了这个脚手架：https://github.com/vuejs/vue-cli

我想将Webpack 3.8.1添加到它。

已经有一个“build”文件夹，里面有很多webpack文件：

但是（其中一个）问题是在项目的根目录中运行“webpack”：

https://webpack.js.org/concepts/这是我应该去的文件。

没有真正的例子。

它有：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

我尽我所能适应：

const path = require('path');

module.exports = {
  entry: './src/entry.js',
  output: {
    path: path.resolve(entry, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

我还在src：

下添加了一个不包含任何内容的entry.js文件

我编辑了我的package.json文件，包括：

 "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^3.2.3",
    "style-loader": "^0.19.0",
    "extract-text-webpack-plugin": "^3.0.1"
  },
  "devDependencies": {
    "sinon": "^4.0.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",

并跑了：

npm install
npm update

我觉得我有点接近，但我仍然无法使用新的网络包。

Answer 1

我把我的评论作为答案，以便能够关闭这个问题，并且（希望）帮助其他未来的用户。

我认为您的问题是尝试使用webpack，您应该使用npm run脚本，例如：npm run dev或npm run prod，然后使用vue+webpack }将为您完成工作，将文件放在配置所指的位置（例如webpack.base.dev.conf）。

如果你看一下package.json，你可以看到这个部分：

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },

每个人都可以npm run X执行。

希望它有所帮助！