码迷,mamicode.com
首页 > Web开发 > 详细

webpack打包(一)

时间:2017-05-01 19:47:28      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:bpa   var   out   htm   淘宝   title   rip   操作   viewport   

1.安装webpack打包工具

webpack是使用npm安装

npm install webpack -g  //全局安装

在命令行中就可以使用webpack这个命令了。

提示:由于npm安装会去找国外镜像,所以安装国内淘宝cnpm镜像

npm install cnpm -g

以后所有的npm操作都用cnpm命令代替就行!

 

注:webpack采用的是commonJs规范

使用webpack(一)

calc.js

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

module.exports = {
    addFun: add
};

main.js

var addExport = require(‘./calc.js‘);


console.log(addExport.addFun(1, 2));

使用webpack命令打包

webpack main.js build.js  //这样就生成了build.js,就可以在html中使用script引入

<!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>
    <script src="./build.js"></script>
    
</body>
</html>

完成命令行中的打包!

 

2用webpack.config.js配置文件

如果只使用命令行,肯定每次都敲很多参数,这样不利于开发,所以如果将这些依赖写入一个配置文件中,每次都使用一个webpack命令就行

webpack.config.js

module.exports = {
    entry: ‘./main.js‘,
    output: {
        filename: ‘./build.js‘
    }
};

在命令中就只要敲webpack这个命令就能自动生成build.js文件

 

webpack打包(一)

标签:bpa   var   out   htm   淘宝   title   rip   操作   viewport   

原文地址:http://www.cnblogs.com/shiwenhu/p/6792491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!