How to add Webpack 3.8.1 to a Vue project

2019-08-23 07:16发布

问题:

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.

回答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!