介绍 · web前端

[TOC] # 介绍 webpack是一个现代的JavaScript应用模块打包器（module bundler），它能把各种资源，例如JS（含JSX）、coffee、样式（less/sass）、图片等都作为模块来处理和使用。它有着难以置信的配置和神奇的效果，大大提高了我们程序员的工作效率。举个例子：我们可以直接使用require（xxx）的形式来引入各模块，即使他们可能需要经过编译（比如JSX和sass），但我们无须再上面花费太多心思，webpack有着各种健全的加载器（loader）在默默处理这些事情。它可以部分代替Grunt和gulp的功能 # 安装 ~~~ cnpm install webpack -g ~~~ ~~~ webpack -h ~~~ 我们还可以直接安装到项目的依赖里，也就是写入package.json ~~~ cnpm init cnpm install webpack --save-dev ~~~ # 配置文件webpack.config.js 按照常规来说，每个项目下都应该配置有webpack.config.js文件，它的作用就如果gulp的gulpfile.js 和Grunt的Gruntfile.js一样，就是一个配置项，告诉webpack它需要作的所有事情和如何去做。所以说webpack.config.js的编写也是我们学习重点。 **重点:什么是入口文件？**模块打包的起点称之为入口起点（entry point）。入口起点告诉webpack从哪里开始，并遵循着依赖关系进行打包。可以将您的应用入口起点认为是根上下文（contextual root）或app第一个启动文件。 # 我们来作一个实例（Hello World！） * 建立index.html文件 * 建立main.js文件 * 建立webpack.config.js文件 * 安装live-server 并预览程序 index.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html> ~~~ main.js ~~~ document.write("<h1>Hello World</h1>"); ~~~ webpack.config.js ~~~ module.exports = { entry: "./main.js", output: { filename: 'bundle.js' } }; ~~~ 然后命令行运行webpack,他就会把那个文件生成出来 ~~~ ➜ vuejs webpack Hash: 42a0a6b37cf4567d9ea9 Version: webpack 3.10.0 Time: 53ms Asset Size Chunks Chunk Names bundle.js 2.51 kB 0 [emitted] main [0] ./main.js 38 bytes {0} [built] ~~~