webpack安装配置与常见使用过程详解（结合vue）

一、安装配置

1. 安装 Node.js
   Webpack 基于 Node.js，需要先安装 Node.js。官网下载地址：https://nodejs.org/en/

2. 全局安装 webpack
   使用 npm 进行安装：

npm install webpack -g

1. 全局安装 webpack-cli
   使用 npm 进行安装：

npm install webpack-cli -g

二、配置webpack.config.js

1. entry
   entry 即入口，webpack 执行打包的入口文件路径。

2. output
   output 即出口，webpack 执行打包生成的文件路径。

3. module
   module 是一个配置对象，webpack 可以根据不同的文件类型，选择不同的 loader 进行解析，使得这些文件可以被打包到 bundle 中。

4. plugins
   plugins 是 webpack 扩展插件，可以用于处理一些额外的任务。

5. mode
   mode 是可选参数，用于指定当前的构建模式，可选值有 development、production 和 none。

三、常见使用过程

1. 结合 Vue
   安装 vue 相关依赖：

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

配置 webpack.config.js：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

1. 使用 babel-loader 转义 ES6
   安装 babel-loader 和相关依赖：

npm install babel-loader @babel/core @babel/preset-env -D

配置 webpack.config.js：

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
          {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    ]
  }
};

以上示例可以结合实际项目进行配置和使用。

四、示例说明

1. Vue 项目实战
   假设现在要实现一个简单的 Vue 项目，其中需要使用 Vue 模板文件和 scss 样式文件。

首先安装 vue 相关依赖：

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

然后安装 scss 相关依赖：

npm install style-loader css-loader sass-loader node-sass -D

项目结构：

├── src
│   ├── main.js
│   ├── App.vue
│   ├── components
│   │   ├── Hello.vue
│   │   └── ...
│   ├── assets
│   │   ├── scss
│   │   └── ...
│   └── store
│       ├── index.js
│       └── ...
├── index.html
└── webpack.config.js

webpack.config.js 配置：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

1. 使用 babel 转义 ES6
   现在会使用最新版的 ES6+ 语法进行开发，需要将写好的代码转成 ES5 可执行的语法。

安装 babel 相关依赖：

npm install babel-loader @babel/core @babel/preset-env -D

webpack.config.js 配置：

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
          {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    ]
  }
};

以上示例可以结合实际项目进行配置和使用。