webpack Vue 最基本配置

行尽江南

于 2019-01-23 14:52:08 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43209953/article/details/86609975

本文详细介绍了如何使用Webpack配置Vue项目的全过程，包括webpack.config.js的设置，如引入VueLoaderPlugin，定义入口文件，设置输出路径及文件名，以及在package.json中配置依赖和脚本。适用于希望快速上手Vue和Webpack的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack.config.js配置：

//导入 VueLoaderPlugin插件
var VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development',
    entry: './main.js',
    output: {
        path: '/',
        filename: 'bundle.js'
    },
    plugins:[
        // 确保vue-loader正常运行的插件，在15.*版本之后要加上这个插件
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'}
        ]
    }
};

package.json配置：

note:webpack-dev-server与其相关的“dev:....” 可以不配置，其余的项都要配置

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.22",
    "vue-loader": "^15.5.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  },
  "devDependencies": {
    "vue-template-compiler": "^2.5.22",
    "webpack-dev-server": "^3.1.14"
  }
}