webpack学习1-打包

webpack是前端开发的包管理工具，优化开发流程

 

1. npm init

 

2.  npm install --save-dev webpack

 

3.创建 app public两个文件夹

  • index.html --放在public文件夹中;
  • Greeter.js-- 放在app文件夹中;
  • main.js-- 放在app文件夹中;

4.增加代码

index.html加入如下文件

<!-- index.html --> <!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'> </div>
<script src="bundle.js"></script>
</body>
</html>

greeeter.js  增加如下

module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!"; return greet;
};

　　

 
5.编译打包
一。命令方式.webpack app/main.js public/bundle.js
二。配置文件方式
1.创建 webpack.config.js
module.exports = {
　　 entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  　  output: { path: __dirname + "/public",//打包后的文件存放的地方
       filename: "bundle.js"//打包后输出文件的文件名
} }

　　这样打包时只需输入 webpack即可，是不是很方便

三。更快捷的打包方式

package.json 增加如下

"scripts": { "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除 }

打包时输入：

npm start
可以达到同样的效果








		

		
posted @ 
2018-02-01 16:12 
行藏在我 
阅读(136) 
评论(0) 
 
收藏 
举报