用 Webpack 配置 Vue.js 项目：Vue Loader 插件实战

Webpack 是个热门的工具，能把你的网站代码（像 JS、CSS、图片）打包成浏览器能懂的东西。Vue.js 是个轻量级的前端框架，而 Vue Loader 就是 Webpack 用来处理 Vue 单文件组件（SFC）的工具。

这篇文章会带你一步步用 Webpack 配置 Vue Loader，让你的 Vue.js 项目资源管理和构建更高效。

首先，打开 package.json 文件，这是你项目的配置文件，里面有项目信息和依赖项。我们要安装一些必要的工具，比如 Webpack、Webpack CLI、Vue Loader、Vue.js 核心库，还有像 Babel 这样的用来转换代码的工具。

在终端里运行以下命令来安装这些依赖：

npm install webpack-cli vue-loader vue-template-compiler babel-core babel-loader --save-dev

接下来，打开 webpack.config.js 文件，这是 Webpack 的配置文件。我们要在这个文件里定义规则来处理不同类型的文件。对于 Vue.js 项目，我们至少需要一条规则来处理 .vue 文件，像这样：

const path = require('path');

module.exports = {
  entry: './src/main.js', // 项目入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
  },
  module: {
    rules: [
      {
        test: /.vue$/, 
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false, // 是否保留空格
          },
        },
      },
      {
        test: /.js$/, 
        exclude: /node_modules/, // 排除 node_modules 目录
        use: ['babel-loader'],
      },
    ],
  },
};