webpack入门与vue（两种方式）

最新推荐文章于 2023-03-19 08:46:36 发布

冰怜

最新推荐文章于 2023-03-19 08:46:36 发布

阅读量291

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/xiaoxin0630/article/details/88085972

版权

vue的代码看上一篇

https://blog.csdn.net/xiaoxin0630/article/details/88014865

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

模块化

我这里就把分开

是页面的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
</div>
</body>
<!--<script src="vue.min.js"></script>-->
<script src="build.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分

</script>
</html>

然后定义一下main.js

{add}=require("./mode101")

导入js文件 vue也要导入但是导入肯定受到那个文件的同意

//导入model01.js
var {add} = require("./model01")
var Vue = require("./vue.min")
var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
        name:'binglian',
        num1:0,
        num2:0,
        result:0,
        url:'http://www.binglian.com',
        size:11
    },
    methods:{
        change:function () {
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
            // this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
            //alert("计算结果："+this.result)
        }
    }
});

model101.js

module.exports.add = add; 同意导出

var add = function (x, y) {
    return x+y;
}
var add2 = function (x, y) {
    return x+y+2;
}
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出

然后是打包js文件

使用webpack打包

webpack main.js build.js

另一种webpack-dev-service 开发服务器他可以热加载，自动刷新

1、安装webpack-dev-server使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包

先看一下目录结构 main.js vue.js这些都放在src下、dist是空的，然后再安装

然后我们安装三个包

npm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

配置package.json

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

运行 npm run dev

webpack.config.js文件配置

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'build.js'		   //输出文件
    },
    devtool: 'eval-source-map',
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

冰怜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack入门与vue（两种方式）

vue的代码看上一篇https://blog.csdn.net/xiaoxin0630/article/details/88014865Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。模块化我这里就把分开是页面的内容&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;...
复制链接

扫一扫