0

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 :

webpackfiles

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

webpackfails

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 :

file tree with entry.js

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.

2
  • 1
    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). Commented Oct 24, 2017 at 15:41
  • yeah you can answer that it's the answer. Commented Oct 25, 2017 at 9:17

1 Answer 1

1

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!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.