从零配置webpack-vue项目

最新推荐文章于 2024-05-11 10:47:12 发布

WinterWang0207

最新推荐文章于 2024-05-11 10:47:12 发布

阅读量1.2k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_38404899/article/details/102744038

版权

webpack 专栏收录该内容

2 篇文章 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

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   //热更新开启
    }
}

WinterWang0207

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零配置webpack-vue项目

1.创建项目文件夹，在项目文件夹下，初始化npminit-y2.安装webpack：npminstallwebpackwebpack-cli--save-dev3.项目下新建webpack.prod.js用于生产环境配置webpack.prod.js：const path = require('path')module.exports={ ...
复制链接

扫一扫