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