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
可以达到同样的效果
