webpack搭建vue脚手架

最新推荐文章于 2023-08-16 15:44:58 发布

我忙着可爱呢呀

最新推荐文章于 2023-08-16 15:44:58 发布

阅读量230

点赞数 1

分类专栏： uniapp vue

本文链接：https://blog.csdn.net/TMTY111/article/details/103343736

版权

uniapp 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

webpack搭建vue脚手架

一、创建项目基本结构

创建一个项目名为vue-webpack-cli
在项目根目录中创建src文件，在src文件下创建如下文件：
src/app.vue

    <template>
        <div id="app">
            <h>{{msg}}</h>
        </div>
    </template>

    <script>
        export default {
            data(){
                return {
                    msg: "hello vue!"
                }
            }
        }
    </script>

src/index.html

    <body>
        <div id="app"></div>
    </body>

src/main.js

    //vue入口文件
    import Vue from 'vue'
    import App from './app.vue'

    new Vue({
        el: "#app",
        render: h=>h(App)
    })

二、在项目根目录中创建package.json文件

    npm init -y

三、在项目根目录下下载依赖

npm i vue vue-loader html-webpack-plugin --save-dev
npm i webpack webpack-cli vue-template-compiler -D

四、在项目根目录下创建webpack.config.js文件

webpack.config.js文件

    const path = require('path')
    const webpack = require("webpack")
    //引入vue-loader插件
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //解析HTML
    const htmlWebpackPlugin = require("html-webpack-plugin")

    module.exports = {
        entry: {
            main: "./src/main.js"
        },
        module:{            //模块读取
            rules:[            //定义文件读取规则
                {
                    test:/\.vue$/,
                    loader:'vue-loader' //文件对应的读取器
                }
            ]
        },
        plugins:[  //使用插件
            new webpack.HotModuleReplacementPlugin(),
            new VueLoaderPlugin(),
            new htmlWebpackPlugin({
                template: "./src/index.html"
            })
        ],
        devServer: {
            contentBase: path.resolve(__dirname,"./src"),
            host: "localhost",
            port: 9090,
            compress: true,
            hot: true,
            open: true    //执行命令自动打开浏览器
        }
    }

五、打开package.json文件进行入下配置：

注意：在json文件里不能写注释

{
    "scripts": {
        "serve": "webpack-dev-server --mode=development",     //开发模式
        "build": "webpack --mode=production"                // 生产模式
      }
}

运行npm run serve即可在浏览器中打开localhost:9090 （注意：不行的话，把node_modules文件删除，重新下载所有依赖即可）

六、解析vue中的css，下载vue-style-loader, css-loader

    npm i vue-style-loader css-loader

在webpack.config.js中添加如下配置

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

七、解析vue中的scss，下载sass-loader, node-sass

    npm i sass-loader, node-sass

在webpack.config.js中添加如下配置

module: {
        rules: [
            //定义scss的匹配规则
            {
                test: /\.scss$/,
                use: [
                    "vue-style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
}

八、babel配置，下载对应loader

npm install -D babel-loader@7 babel-core babel-preset-env

在webpack.config.js中添加如下配置

module: {
        rules: [
            //babel规则
            {
                test:/\.js$/,
                use: ['babel-loader'],
                include: /src/
            }
        ]
}

九、定义图片匹配规则

下载

npm i url-loader file-loader -D

在webpack.config.js中添加如下配置

module: {
        rules: [
            //babel规则
            {
                test: /\.(jpg|png|gif|svg|jpeg)/,
                use: [
                    {
                        loader: "url-loader",
                        loader: "file-loader",
                        options: {
                            limit: 1024 //限制图片大小
                        }
                    }
                ]
            }
        ]
}

十、下载webpack-merge，合并webpack.config.js

npm i webpack-merge -D

新建config文件夹，分别新建webpack.pro.js和webpack.dev.js，作为开发环境和生产环境配置文件，在文件中引入

const merge = require("webpack-merge")
const config =  require("../webpack.config.js")
module.exports =merge(config, {
	//不通用的代码块
},

每天学习一点点，一个入门级菜鸟程序员的微末追求

附上研发项目：在这里插入图片描述
完全uniapp开发的，语法融合vue，有任何问题都可以讨论。

我忙着可爱呢呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack搭建vue脚手架

webpack搭建vue脚手架一、创建项目基本结构创建一个项目名为vue-webpack-cli在项目根目录中创建src文件，在src文件下创建如下文件：src/app.vue <template> <div id="app"> <h>{{msg}}</h> </div&...
复制链接

扫一扫