从零开始Webpack4.0+Vue3.0+iView3.0+Vuex环境搭建

最新推荐文章于 2023-09-28 11:55:57 发布

weixin_33682719

最新推荐文章于 2023-09-28 11:55:57 发布

阅读量1.3k

点赞数

文章标签： webpack javascript ui ViewUI

原文链接：https://juejin.im/post/5c9e29d3e51d453d827e8ce2

版权

项目地址:github.com/MrGaoGang/l…

先上效果图:

项目目录:

npm init初始化npm的配置
npm install webpack --save-dev和npm install webpack-cli --save-dev :安装webpack依赖
npm install webpack-dev-server --save-dev ：可以在开发环境提供很多服务，比如启动一个服务器，热更新，接口代理等;
创建一个webpack.config.js文件

var path = require("path");

var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定输出目录
        publicPath: "/dist/",
        filename: "main.js"//输出文件
    }

}

module.exports = config;

//同时在项目根目录创建一个index.html文件和main.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>
</head>
<body>

    <div id="app">Hello world</div>
    
    <script src="/dist/main.js"></script>
</body>
</html>
复制代码

然后使用npm run dev运行起来
复制代码

体验一下热更新,在main.js文件中写入:document.getElementById("app").innerHTML="哈哈哈哈"; 保存，你会发现页面已经更新了。

在webpack的世界中每一个文件都是一个模块，比如css,js,html,jpeg对于不同的模块我们要使用不同的加载器进行处理；比如：css的加载器

//安装css加载器
npm install css-loader --save-dev
npm install style-loader --save-dev
//然后在webpack.config.js文件中添加对css的处理

var path = require("path");

var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定输出目录
        publicPath: "/dist/",
        filename: "main.js" //输出文件
    },
    module: {
        rules: [{
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        }]
    }

}
/**
大概的意思就是，当遇到了以css结尾的文件，首先将.css文件使用css-loader转换，然后通过style-loader转换，然后打包。
use选项可以是数组或者字符串，如果是数组的话，它的编译顺序是从后向前的
**/
复制代码

预览一下：（先保存webpack.config.js文件，并重新执行npm run dev）

//添加一个index.css样式文件，然后在main.js中引入，你会发现文字变成了红色;
//index.css
#app {
    font-size: 18px;
    color: red;
}
//main.js
import "./index.css"

document.getElementById("app").innerHTML = "哈哈哈哈";
复制代码

上述步骤完成之后，打开控制台，选中某一个标签，你会发现样式都直接写在了对应的标签下。

使用webpack的插件功能；这里我们使用extract-text-webpack-plugin插件，将散落在各地的css提取出来，生成一个main.css

npm install extract-text-webpack-plugin@next --save-dev
复制代码

由于extract-text-webpack-plugin目前不支持webpack4.0+,故此处需要安装extract-text-webpack-plugin@next版本


//修改配置文件
var path = require("path");
//导出插件
var ExtractTextPlugin=require("extract-text-webpack-plugin");
var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定输出目录
        publicPath: "/dist/",
        filename: "main.js" //输出文件
    },
    module: {
        rules: [{
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                use:"css-loader",
                fallback:'style-loader'
            })
        }]
    },
    plugins:[
        //将提取后的文件命名为main.css
        new ExtractTextPlugin("main.css")
    ]

}

module.exports = config;
复制代码

此时如果将之前的html文件中引入main.css文件，则main.css文件会生效：


<!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>
    <link rel="stylesheet" href="/dist/index.css">
</head>
<body>

    <div id="app">Hello world</div>
    
    <script src="/dist/main.js"></script>
</body>
</html>

复制代码

正式开始搭建vue的开发环境，因为vue大多是以单文件组件的方式存在，一个.vue文件中存在

weixin_33682719

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零开始Webpack4.0+Vue3.0+iView3.0+Vuex环境搭建

项目地址:github.com/MrGaoGang/l…先上效果图:项目目录:npm init初始化npm的配置npm install webpack --save-dev和npm install webpack-cli --save-dev:安装webpack依赖npm install webpack-dev-server --save-dev ：可以在开发环境提供很多服务，...
复制链接

扫一扫