从0搭建一个Webpack+Vue项目

104 阅读1分钟

npm init

安装webpack相关包

npm install webpack webpack-dev-server webpack-cli -D

配置webpack

  1. 在根目录下新建config文件夹

  2. 在config文件夹下创建webpack.dev.config.jswebpack.prod.config.js文件

  3. 修改package.json文件

// package.json
"scripts": {
    "dev": "webpack serve --config config/webpack.dev.config.js",
    "build": "webpack --config config/webpack.prod.config.js"
},

// webpack.dev.config.js
const path = require('path')

module.exports = {
    mode: 'development', //模式
    entry: './index.js', //入口
    output: {
        filename: '[name].[contentHash].bundle.js'
    }

}

// webpack.prod.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    entry: './index.js', //入口
    mode: 'development', //模式
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[contenthash].bundle.js'
    },
}

线上环境 配置插件 clean-webpack-plugin

plugins:[
        new CleanWebpackPlugin()
    ]

开发和线上环境 配置插件 html-webpack-plugin

  1. 安装插件 npm install html-webpack-plugin -D
  2. 根目录下新建public文件夹
  3. 在public文件夹下新建index.html文件
  4. webpack.config.js中配置该插件
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
        new HtmlWebpackPlugin({
            title: '', 
            template: path.resolve(__dirname, '../public/index.html')
        })
    ]

配置处理vue文件的vue-loader

  1. 安装相关loadernpm install vue-loader vue-template-compiler -D
  2. webpack.config.js中配置该loader

            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
     
  1. webpack.config.js中配置vue-loader对应的插件
const VueLoaderPlugin = require('vue-loader')
plugins: [
        new VueLoaderPlugin(),
        ]

配置处理css文件的vue-style-loader、css-loader

 {
     test: /\.css$/,
     use: [
         'vue-style-loader',
          'css-loader'
     ]
},

配置处理js文件的babel-loader

1、 安装相关loadernpm install -D babel-loader @babel/core @babel/preset-env 2. 配置该loader

{
                test: /\.js$/,
                loader: 'babel-loader',
                // 使用options给babel-loader传递选项
                options: {
                    // babel预设,即预设里面整合了很多插件
                    presets: ['@babel/preset-env']
                }
            },

配置处理图片文件

*webpack5之后可使用“资源模块”来处理

        {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset/inline'
        }

webpack5之前使用url-loader

  1. 安装相关loader npm install url-loader -D
  2. 配置该loader

            {
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]?[hash:8]',
                        outputPath: 'images/',
                         // esModule:false 解决通过require动态引入图片路径显示为`<img src="[object Module]">`问题
                         esModule:false
                    }
                  }
                ]
             },

未完待续。。。