如何将 Webpack 3.8.1 添加到 Vue 项目中 [英] How to add Webpack 3.8.1 to a Vue project

问题描述

说我去这个脚手架:

但是(其中一个)问题是在项目的根返回中运行webpack":

并且我编辑了我的 package.json 文件以包含:

 "依赖项": {"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"},开发依赖":{"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 安装更新

我觉得我有点接近了，但我仍然无法使用新的 webpack.

解决方案

我把我的评论作为答案，以便能够结束这个问题并(希望)帮助其他未来的用户.

我认为您的问题是尝试使用 webpack，您应该使用 npm run 脚本，例如:npm run dev 或 npm run prod，然后 vue+webpack 会为你做这项工作，把文件放在配置说的地方 (webpack.base.dev.conf代码>例如).

如果你看一下 package.json，你会看到这部分:

脚本":{"dev": "节点构建/dev-server.js","start": "node build/dev-server.js","build": "节点构建/build.js","unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run","e2e": "节点测试/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 执行.

希望有帮助！

say I've go this scaffolding : https://github.com/vuejs/vue-cli

I want to add Webpack 3.8.1 to it.

there's already a "build" folder with lots of webpack files in it :

but (one of) the issue(s) is running "webpack" in the project's root returns :

https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.

there's no real example.

it's got :

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'
  }
};

which I adapted to the best of my ability to :

const path = require('path');

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

I also added a entry.js file containing nothing under src :

and I edited my package.json file to include:

 "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",

and ran :

npm install
npm update

I feel I'm getting somewhat close but I still cannot manage to use the new webpack.

解决方案

I put my comment as answer to be able to close this question and (hopefuly) help others future users.

I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).

If you take a look at package.json, you could see this part:

"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"
  },

Every one can be executed with npm run X.

Hope it helps!

这篇关于如何将 Webpack 3.8.1 添加到 Vue 项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！