步骤
首先,install Webpack 和 webpack-dev-server.
cnpm i webpack webpack-dev-server -g
接下来就可以进行demo演示了.
webpack-dev-server
用浏览器访问 http://127.0.0.1:8080.
什么是webpack?
Webpack 是前端的打包工具类类似于 Grunt and Gulp.但是有区别,因为它是模块化构建机制,Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
webpack main.js bundle.js
它的配置文件是 webpack.config.js.
/* webpack.config.js */
module.exports = {
entry : './main.js',
output : {
filename : 'bundle.js'
}
};
有了webpack.config.js,你可以不带参数使用webpack
webpack
一些命令行选项你应该知道。
- webpack - 构建文件
- webpack -p 发布
- webpack –watch 监听项目
- webpack -d 包含source maps方便调试
webpack –colors 让打包界面更好看
去构建你的项目,你可以把启动项写进package.json
{
"name": "webpackDemo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "webpack-dev-server --devtool eval --progress --colors",
"deploy" : "NODE_ENV=production webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC"
}