webpack一些常用配置_webpack常见配置-优快云博客

本文链接：https://blog.youkuaiyun.com/DaTing_07/article/details/123814683

本文介绍如何使用Webpack搭建Vue项目的构建流程，包括ES6语法转换、样式文件处理、资源文件管理及项目优化等方面的内容。

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

ES6编译

安装 babel-loader

cnpm i -D babel-loader @babel/core @babel/preset-env webpack

配置 vue.config.js 文件

const path = require('path');
module.exports = {
    entry: './src/index.js', //定义入口js
    output:{
        filename:'index.js',//打包输出的js文件名
        path:path.resolve(__dirname,'dist') //输出的js目录
    }，
    // 以下代码为新添加代码
    module:{
        rules:[
            {
                test: /\.js$/, // 匹配所有 js 文件
                loader: 'babel-loader' // 使用 babel-loader 处理 js 文件
            },
        ]
    },
};

图片等资源文件的打包配置

安装相关loader

cnpm i -D file-loader

webpack相关配置

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/, // 管理图片资源
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字资源
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字资源
                use:[
                    'file-loader'
                ]
            }
        ]
    }
};

vue文件的打包配置

安装loader

cnpm i -D vue-loader vue-template-compiler

webpack相关配置

const VueLoaderPlugin = require('vue-loader/lib/plugin');  // 引入 vue-loader 文件

module.exports = {
    plugins: [
        new VueLoaderPlugin(), // 这里 vue 需要额外添加一个插件，将定义的 .js 、 .css 规则应用到 .vue 文件中
    ],
    module:{
        rules:[
            {
                test:/\.vue$/, // 处理 .vue 文件
                loader: 'vue-loader'
            },
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 定义 vue 的重命名
        }
    }
};

项目优化配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/js/index.js', // 入口文件
    plugins: [
        new CleanWebpackPlugin(), // 清除旧资源
        new HtmlWebpackPlugin({ // 动态生成 html 文件
            template: './src/index.html',
        }),
        new VueLoaderPlugin(), // 这里 vue 需要额外添加一个插件，将定义的 .js 、 .css 规则应用到 .vue 文件中
    ],
    output:{
        filename:'index.js?[hash]', // 添加哈希值，防止缓存
        path:path.resolve(__dirname,'dist') // 输出文件夹
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/, // 处理 css 文件，以及 .vue 文件中的 <style>
                use:[
                    'vue-style-loader',
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/, // 管理图片资源
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名，文件路径后添加哈希值避免缓存
                        }
                    },
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字资源
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名，文件路径后添加哈希值避免缓存
                        }
                    }
                ]
            },
            {
                test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字资源
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名，文件路径后添加哈希值避免缓存
                        }
                    }
                ]
            },
            {
                test:/\.vue$/, // 处理 .vue 文件
                loader: 'vue-loader'
            },
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

package.json文件

{
  "name": "webpack_vue",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}