webpack

最新推荐文章于 2023-07-06 00:34:03 发布

weixin_45390091

最新推荐文章于 2023-07-06 00:34:03 发布

阅读量82

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_45390091/article/details/105338748

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

打包工具将封装的js打包成浏览器可识别的js

步骤

1.安装node.js

测试是否成功安装

node.js

2.使用node.js中的npm 安装nrm，并且设置下载路径为国内地址

npm install nrm -g      //-g 表示为全局变量
nrm ls		//查看npm的仓库列表
nrm use taobao   //切换指定镜像   
nrm test npm //测试速度

3.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //查看是否安装

4.安装webpack

cnpm install --save-dev webpack@3.6.0   --指定版本安装到本项目
npx webpack -v  --测试时候成功安装
npx webpack main.js bulid.js --进行打包

使用

编写main.js整合使用的js

var {add} = require('./model01.js')
var Vue = require('./vue.min')
var vm = new Vue({
    el:"#app",
    data:{
        name:"黑马程序员",
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn'
    },
    methods:{
        change:function(){
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));

        }
    }
})

在要打包的包下cmd

cnpm webpack main.js bulid.js   //生成一个buid.js整合文件

将build.js文件引入使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>

</head>

<body>
<div id="app">
    <h1>{{name}}</h1>
    <input type="text" v-model="num1"/>
    +
    <input type="text" v-model="num2"/>
    =<span>{{result}}</span>
    <input type="button" value="计算" v-on:click="change"/>
</div>
</body>
<script src="bulid.js"></script>
</html>

webpack-dev-server

webpack-dev-server开发服务器，它的功能可以自动打包实现热加载并且自动刷新浏览器。

安装

在需要打包的目录下安装

cnpm 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"
	}

配置webpack.confifig.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',//debug调试
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'test.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}