Home Articles

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

Asked
Viewed 329 times
0

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

我想将Webpack 3.8.1添加到它 .

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

webpackfiles

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

webpackfails

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文件:

file tree with 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

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

1 Answer

  • 1

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

    我认为您的问题是尝试使用 webpack ,您应该使用 npm run 脚本,如: npm run devnpm 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 执行 .

    希望能帮助到你!

Related