webpack4配置详细过程及采坑_pack4dist 过程-CSDN博客

本文链接：https://blog.csdn.net/MingleHDU/article/details/84113032

本文详细介绍如何从零开始搭建一个Vue项目，包括项目文件夹结构的创建、Vue及依赖库的安装、webpack配置文件的编写，以及常见错误的解决方法。

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

新建项目文件夹如mooc_learning
没有进到mooc_learning，进行安装时，会报错Failed to execute ‘/usr/local/bin/node /usr/local/lib/node_modules/npm/xxx’
新建src文件夹，并建立文件src->app.vue

<template>
    <div id="test">{{text}}</div>
</template>
<script>
export default {
    el:'#test',
    data: {
        text:'abc',
    }
}
</script>
<style>
#test{
    color: red;
}
</style>

新建src文件夹，并建立文件src->index.js

import Vue from 'vue';
import App from './app.vue';

const root = document.createElement('div');
document.body.appendChild(root);

new Vue({
    render: (h) => h(App)
}).$mount(root);

git init生成package.json
安装webpack vue vue-loader 。安装时要注意先在全局安装（-g）后，再进行-D安装。npm install -S -D -g区别

sudo npm i webpack vue vue-loader -g
sudo npm i  webpack vue vue-loader -D

报错：

npm WARN vue-loader@15.2.4 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@15.2.4 requires a peer of vue-template-compiler@^2.0.0 but none is installed. You must install peer dependencies yourself.

解决方案：

sudo npm i css-loader vue-template-compiler -g
sudo npm i css-loader vue-template-compiler -D

如果安装vue-template-compiler成功后，依旧报错“vue-loader@15.2.4 requires a peer of vue-template-compile”，
在这里插入图片描述
则需要检查一下，你的vue-loader是否安装成功了（我在这个地方卡了很久，明明package.json中已经可以看到ue-template-compiler已经安装成功，但报错就是不消失）
5. 建立webpack.config.js

// 使用绝对路径
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件

module.exports = {
    // webpack负责打包前端资源
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename: 'bundle.js',
        path:path.join(__dirname, 'dist'),
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader',
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            },
        ]
    },
    mode: 'production',
}

配置package.json，添加build命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },

注意，需要指定运行环境，此处暂且定为mode: ‘production’,

mode: 'production',

运行npm run build，此时报错：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

解决方法：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件

plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
],

再次运行npm run build，报错：Module parse failed: Unexpected character ‘#’ (13:0).You may need an appropriate loader to handle this file type.
在这里插入图片描述

原因是未安装style-loader css-loader，解决方案是：

sudo npm i style-loader css-loader
并在webpack.config.js-->rules中添加对css文件的处理loader
module:{
   rules:[
       {
           test:/\.vue$/,
           loader:'vue-loader',
       },
       {
           test:/\.css$/,
           use:['style-loader','css-loader'],
       },
   ]
},