0
点赞
收藏
分享

微信扫一扫

从零配置webpack-vue项目

m逆光生长 2023-01-03 阅读 78
csshtmlbundle虚拟化云计算
加载失败


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

 

 

举报

相关推荐

对webpack从零配置

当前目录json配置文件编程语言

webpack从零开始搭建vue项目

人工智能

从零搭建vue项目 单页应用的基本配置

日记本vue前端开发那些事儿

webpack 从零开始配置 Vue 开发环境（基础）

前端Vue

webpack配置vue

csshtmlbundle编程语言

【Vue】从零搭建一个Vue项目

vue.jsjavascript前端

WebPack实战 WebPack打包Vue项目

webpackvue.jsnpm前端生产环境JavaScript前端开发

从零开始构建Vue2+Webpack前端项目

VueWebpack加载器Vue.js前端开发

webpack4.0从零到一搭建vue项目框架 vue + vue-router + vuex + hot + 换肤 + moke...

日记本前端开发那些事儿VUE学习Vue

从零教你使用webpack，从此项目打包不用愁

webpack前端node.js
0 条评论
加载失败