从零配置webpack-vue项目

小灰灰 2023-06-10 03:26 28阅读 0赞

1.创建项目文件夹，在项目文件夹下，初始化

npm init -y

2.安装webpack：

npm install webpack webpack-cli --save-dev

3.项目下新建webpack.prod.js 用于生产环境配置

webpack.prod.js：

const path = require('path')
    module.exports={
        entry:{                     //入口文件
            index:'./src/index.js',
        },
        output:{                    //导出文件配置
            path:path.join(__dirname,'dist'),  //目录文件夹
            filename:'bundle.js'   //打包后的文件名
        },
        mode:"production",   //生产环境
    }

4.package.json：

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build":"webpack --config webpack.prod.js"  //打包处添加
      },

5.创建src文件夹目录：

新建index.js 写上：

document.write('hello world');

6.运行npm run build 命令打包 可看到生成了dist目录 下面有bundle.js是打包后的文件

可在dist下面新建index.html，将bundle.js引入，浏览器打开可看到打包后的文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./bundle.js"></script> //引入bundle.js 打开即可看到
    </head>
    <body>
        
    </body>
    </html>

### 打包css方法： ###

cnpm i css-loader style-loader --save-dev
    
    import './style/helloworld.css'   即可使用
    
    入口文件 index.js:
    
    import './style/helloworld.css'
    document.write('hello world');

webpack配置文件下：

module:{     
            rules:[
                {
                    test:/\.css$/,
                    loader:'style-loader!css-loader' 
                },
            ]
        }

### js兼容es6语法： ###

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

webpack配置文件中添加规则：

module:{     
            rules:[
                {
                    test:/\.css$/,
                    loader:'style-loader!css-loader' 
                },
                {
                    test:/\.js$/,
                    use:'babel-loader' 
                },
            ]
        }

项目文件下新建.babelrc文件：

{
        "presets": [
            [
                "@babel/preset-env"
            ]
        ]
        
    }

index.js写 打包看是否能被编译

const sss = 'hello world'
    document.write(sss);

### 图片字体的打包： ###

npm i file-loader -D

webpack配置文件添加规则：

{
          test:/\.(png|svg|jpg|gif)$/,
          use:[
                 'file-loader'
               ]
     },
     {
           test:/\.(woff|woff2|eot|ttf|otf)$/,
           use:[
                  'file-loader'
               ]
    },

### 热更新配置： ###

npm install webpack-dev-server -D

项目文件夹 新建 webpack.dev.js配置

module.exports={
        entry:{
            index:'./src/main.js',
        },
        output:{                    //导出文件配置
            path:path.join(__dirname,'dist'),  //目录文件夹
            filename:'bundle.[hash].js'   //打包后的文件名 加一串hash用于版本控制
        },
        mode:"development", //开发环境
        module:{     
            rules:[
                {
                    test:/\.css$/,
                    loader:'style-loader!css-loader' 
                },
                {
                    test:/\.(png|svg|jpg|gif)$/,
                    use:[
                        'file-loader'
                    ]
                },
                {
                    test:/\.(woff|woff2|eot|ttf|otf)$/,
                    use:[
                        'file-loader'
                    ]
                },
                {
                    test:/\.js$/,
                    use:'babel-loader' 
                },
            ]
        },
    }

配置：

const webpack = require('webpack')

plugins:[
            new webpack.HotModuleReplacementPlugin()  插件引入
        ],
    
    //devServer配置
    
        devServer:{
            contentBase:'./dist',
            hot:true
        }

package.json修改：

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.prod.js",
        "dev": "webpack-dev-server --config webpack.dev.js --open"  //热更新
      },

运行npm run dev 入口项目自动打开 更改数据刷新后即可看到变化

### 打包vue文件： ###

npm i vue-loader vue-router vue-template-compiler vuex vue

webpack.prod.js 和 webpack.dev.js 里面配置：

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

{
        test:/.vue$/,
        loader:'vue-loader'
    }

plugins:[
            new VueLoaderPlugin()
        ],

src下面新建app.vue

<template>
        <div id="test">{
       {text}}</div>
    </template>
    <script>
    export default {
        data(){
            return {
                text:'abc'
            }
        }
    }
    </script>
    <style>
    #test{
        color: red;
    }
    </style>

创建main.js入口文件：

import Vue from 'vue'
    import App from './app.vue'
    
    const root = document.createElement('div')
    document.body.appendChild(root)
    
    new Vue({
        // h是generate api參數
        render:(h)=>h(App)
    }).$mount(root)

src下创建index.html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id='root'></div>  将vue挂载到根节点
    </body>
    </html>

### 打包html文件： ###

npm i html-webpack-plugin -D

webpack.prod.js 和 webpack.dev.js 里面配置：

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

new HtmlWebpackPlugin({
            template:'./src/index.html'
      })

### 打包后自动清理覆盖之前文件： ###

npm i clean-webpack-plugin -D

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    
    plugins:[
            new CleanWebpackPlugin(),
        ],

### 打包less文件： ###

npm i less less-loader -D
    
    {
            test:/\.less$/,             
            use:[
                   'style-loader',
                   'css-loader',
                   'less-loader'
                ]
    },

### 最后的文件配置 ，全部代码： ###

**webpack.prod.js**

const path = require('path')  //需要引入node模块
    const webpack = require('webpack')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')  //vue插件
    const HtmlWebpackPlugin = require('html-webpack-plugin')  //html插件
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");  //自动清理打包后文件插件
    
    module.exports={
        entry:{
            index:'./src/main.js',
        },
        output:{                    //导出文件配置
            path:path.join(__dirname,'dist'),  //目录文件夹
            filename:'bundle.[hash].js'   //打包后的文件名 加一串hash用于版本控制
        },
        mode:"development", //开发环境
        module:{     
            rules:[
                {
                    test:/\.css$/,
                    loader:'style-loader!css-loader' 
                },
                {
                    test:/\.less$/,             
                    use:[
                        'style-loader',
                        'css-loader',
                        'less-loader'
                    ]
                },
                { 
                    test: /\.styl$/, 
                    use: [
                        'style-loader', 
                        'css-loader', 
                        'stylus-loader'
                    ] 
                },
                {
                    test:/\.(png|svg|jpg|gif)$/,
                    use:[
                        'file-loader'
                    ]
                },
                {
                    test:/\.(woff|woff2|eot|ttf|otf)$/,
                    use:[
                        'file-loader'
                    ]
                },
                {
                    test:/\.js$/,
                    use:'babel-loader' 
                },
                {
                    test:/.vue$/,
                    loader:'vue-loader'
                }
            ]
        },
        plugins:[
            new webpack.HotModuleReplacementPlugin(),
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            }),
            new CleanWebpackPlugin(),
        ],
        //devServer配置 在package.json配置
        devServer:{
            contentBase:'./dist', //打开目录为dist下
            hot:true   //热更新开启
        }
    }

**webpack.dev.js**