写好了一个vue项目 如何用webpack打包？

Question

写好了一个vue项目 如何用webpack打包？
我想知道大概的操作顺序
不涉及具体的细节
谢谢

webpack.config.js配好

运行webpack命令
输出了一大串错误信息：

求解~~~

加了url-loader以后错误不报了
webpack也打包完成了

但是从dist里点击index.html打开不了网页
是一个空白页

完整的webpack.config.js如下：
`

const path = require('path');
const root = path.resolve(__dirname);
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rm = require('rimraf')

rm(path.join(root, 'dist'), err => {
    if (err) throw err;
    console.log('/dist目录删除成功')
});

module.exports = {
    entry: path.resolve(root, 'src/main.js'),
    output: {
        path: path.resolve(root, 'dist'),
        filename: 'bundle.js',
        publicPath: './'
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                use: [
                    'html-loader',
                    'ejs-loader'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                oneOf: [
                    {
                        resourceQuery: /base64/,
                        use: ['url-loader']
                    },
                    {
                        use: [{
                            loader: 'url-loader',
                            options: {
                                limit: 1,
                                name: 'img/[name].[hash:7].[ext]'
                            }
                        }]
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: 'css/[name].[hash:7].[ext]'
                            }
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: 'css/[name].[hash:7].[ext]'
                            }
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 1,
                    name: 'fonts/[name].[ext]',
                },
            },
            {
                test: /\.(svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 1,
                    name: 'svg/[name].[ext]',
                },
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
   template:path.resolve(root,"public/index.html")
        })
    ]
};

`

Answer 1

谢谢大家的热心回答
问题原因找到了
因为router的mode不能设为history 而是需要hash
参考：
链接描述

Answer 2

说明你需要好好看下和学习下， webpack的知识，

因为 不管是vue的项目，react的项目。当你手动配置 webpack构建脚本的时候， 都差不多；

唯一的区别就是 对应的 loader 不一样。

而这些loader，大部分都是第三方提供的。能力强的可以自己写

大概的流程：

1. 入口文件配置
2. 输出文件的配置
3. chunk的配置
4. 各种资源loader 的配置
5. 优化的配置

等，还有些细节

如果配合本地开发，还需要配置 dev-server，

另外：
webpack 重要的2个东西：

1. loader
2. plugin

Answer 3

从dist里打开后是一个空白页，应该是打包后的index.html引用打包后的js文件失败，估计是请求的绝对路径，你可以打开index.html看一下是不是绝对路径。

解决的话，可以试试在output的配置中加上publicPath: './'

Answer 4

不是用的 vue-cli ？

Answer 5

• 如果是工作中的问题，推荐使用 vue-cli
• 如果是为了学习，建议 webpack 先从简单学起，增量式地更新 webpack.config.js，直接上来就配置 vue，中间会略过很多细节