webpack自动打包

场景：打包webpacktest02项目中的vue_01.html的js

一、一开始的文件目录（红色被我抹掉的是后面安装或创建的）：

在这里插入图片描述
1、dist文件夹是用来存放打包后的js文件（build.js）

2、src文件夹是存放打包的js资源
main.js:(js代码，我这里是vue)

// main.js表示webpack程序开启的程序入口
// 先导入需要打包的文件
var {add} = require("./model01.js");
var Vue = require("./vue.min.js");

// 把打包文件的Js复制到此处
var VM1 = new Vue({
    el:"#app",//表示当前vue对象接管app的div区域
    data:{
        name:'黑马程序员',// 相当于是MVVM中的Model这个角色
        num1:'',
        num2:'',
        result:'',
        list:[1,2,3,4,5],
        user:{name:"huang", age:10},
        userlist:[ 
            {user:{name:"huang1", age:10}},
            {user:{name:"huang2", age:20}},
            {user:{name:"huang3", age:30}}
        ]
    },
    mounted:function() {
        // alert("VM1");
    },
    methods:{
        abc: function(){
            // alert("计算");
            this.result = add(this.num1, this.num2);
            // this.result = this.num1 + this.num2;
        },
        acc: function(){
            alert("22222");
            // this.result = this.num1 + this.num2;
        }
    }
});

model01.js:（js代码的方法）

var add = function(x, y){
    return x + y + 1;
}

var add1 = function(x, y){
    return x + y;
}

// 导出add方法
// module.exports.add = add;
// module.exports.add2 = add2;
module.exports ={add};//如果有多个方法这样导出

vue.min.js就是引用vue的包了

二、进入项目目录打开cmd 输入

cnpm install [email protected] [email protected] [email protected] --save-dev

一次性本地安装 webpack 3.6.0版本 webpack-dev-server 2.9.1版本 html-webpack-plugin 2.30.1版本

安装成功后就会生成

node_modules文件夹 package.json文件了
在这里插入图片描述
修改 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"
  }
}

本目录下创建 webpack.config.js：

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

然后进入到项目目录下cmd，运行 npm run dev就能运行成功！自动打包好的build.js文件会自动导入vue01.html中。

宇宙第零帅

发布了86 篇原创文章 · 获赞 1 · 访问量 4347

私信关注

一、一 开始的文件目录（红色被我抹掉的是后面安装或创建的）：

二、进入项目目录打开cmd 输入

猜你喜欢

一、一开始的文件目录（红色被我抹掉的是后面安装或创建的）：