webpack4手动搭建vue项目

最新推荐文章于 2025-07-11 16:02:57 发布

原创最新推荐文章于 2025-07-11 16:02:57 发布 · 686 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

前端同时被 3 个专栏收录

6 篇文章

订阅专栏

javascript

4 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本教程详细介绍了如何从零开始搭建一个Vue+Webpack的项目环境，包括目录结构的创建、依赖安装、配置Webpack及VueLoaderPlugin，解决常见错误，确保项目成功构建。

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

看了慕课网的 vue+webpack打造todo 的教程，要手动搭建一下vue的项目。教程的webpack版本是3.0的，在学习的时候遇到了一个问题。

mkdir vue-ssr-teach
cd vue-ssr-teach

初始化npm 项目, 这一步执行完会出现一个package.json的文件

npm init

安装依赖，需要安装的总共有： webpack vue vue-loader css-loader vue-template-compiler, 后续有可能会提示你安装webpack-cli

npm i webpack vue vue-loader
npm i css-loader vue-template-compiler

新建文件夹，创建src/App.vue,src/index.js

src/App.vue 代码：

<template>
    <div id="test">{{text}}</div>
</template>

<script>
export default {
    data () {
        return {
            text: "abc"
        }
    }
}
</script>
<style>
#testm {
    color: red;
}
</style>

这里的代码很普通了，就是一个普通的Vue文件代码，不用解释
5. 新建webpack.config.js

webpack.config.js代码：

const path = require('path')
// 加入 VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },{
              test: /\.css$/,
              loader: 'css-loader'
          }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

这里特别注意：

. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

如果不引入 VueLoaderPlugin 就会编译失败
6. 在package.js > script下添加代码如下：

"build": "webpack --config webpack.config.js"

因为只有在这里配置了，才能运行内部的webpack
7. 在命令提示符下运行命令： npm run build, 此时有可能会报下面的错误：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

输入y后则会自动安装，或者手动执行npm i webpack-cli 也行
安装好有可能会报下面的错误:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

这是一条很黄的提示, 意思就是说你要指定生产环境还是开发环境。
详情参考官网: https://webpack.js.org/concepts/mode/
修改package.json > script > build

"build": "webpack --mode=production --config webpack.config.js"

然后再执行 npm run build 就可以了，
你会发现项目里多了个 dist的文件夹

前端撸客

关注前端撸客公众号