不使用vue-cli,webpack搭建vue环境踩踩踩过的坑

最新推荐文章于 2024-01-08 23:01:02 发布

原创

最新推荐文章于 2024-01-08 23:01:02 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了不使用vue-cli，而是通过手动配置webpack来搭建Vue环境时遇到的问题及解决办法。首先，通过初始化项目生成package.json。接着，安装webpack和webpack-cli，注意webpack4.x需要webpack-cli。然后，安装vue和vue-loader。在webpack.config.js中配置入口、输出和关键插件，如js文件的loader和HtmlWebpackPlugin，这两点是避免不了的配置，分别用于解析入口文件和生成HTML。参考html-webpack-plugin相关文章可解决配置问题。

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

初始化项目,生成一个package.json文件

npm init

使用webpack构建，先安装webpack，但是webpack4.x版本需要安装webpack-cli,由于只在开发环境下使用webpack构建

npm install webpack webpack-cli --save-dev

安装vue vue-loader

npm install vue vue-loader --save

创建一个webpack.config.js文件，配置项目入口，项目输出以及必要的插件

const path=require('path');
const webpack=require('webpack');
/*
*好像是新版的vue-loader必须要引入这个插件才可以正常运行
*/
const VueLoaderPlugin=require('vue-loader/lib/plugin');
const HtmlWebpackPlugin =require('html-webpack-plugin');
entry:'./src/main.js',
    output: {
        path:path.resolve(__dirname,'dist'),
        filename: 'bunlde.js',
        publicPath:PUBLIC_PATH
    },
    module: {
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                },

            },
            {
                test:/\.vue$/,