webpack打包vue

要让webpack能够打包.vue文件，我们需要使用vue-loader来解析.vue文件。首先，我们需要安装vue-loader和vue-template-compiler这两个依赖项。可以使用以下命令来安装它们：

npm install vue-loader vue-template-compiler -D

安装完成后，我们需要在webpack.config.js中添加相应的配置。首先，我们需要使用vue-loader来处理.vue文件。在module.rules数组中添加以下配置：

module: {
  rules: [
    // ...其他规则
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ]
}

接下来，我们还需要配置resolve.extensions选项，以便webpack能够识别.vue文件。在resolve.extensions数组中添加'.vue'，例如：

resolve: {
  extensions: ['.js', '.vue', '.json']
}

最后，我们还需要添加HtmlWebpackPlugin插件来处理html文件。可以使用以下命令来安装它：

npm install html-webpack-plugin -D

然后，在webpack.config.js中添加以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    // ...其他插件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html')
    })
  ]
};

这样，webpack就能够正确地解析.vue文件并打包vue工程了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [使用webpack打包vue项目](https://blog.csdn.net/qq_42750982/article/details/124202782)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [webpack打包Vue项目](https://blog.csdn.net/duxiaoxie123/article/details/116274852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]