webpack和browserify都是前端打包工具
1.webpack是什么?
webpack是前端打包工具,可以把很多模块打包成很少的文件。它有自己的特性代码分割,它可以使你项目在加载过程中只加载你需要的文件。除了常用的前端文件它可以处理外,还可以处理你自定义的文件。
2.安装和命令行
0.新建webpack目录:mkdir webpack-demo
1.npm init:初始化初始化webpack目录
2.安装webpack
安装最新版本或特定版本:npm install --save-dev webpack / npm install --save-dev webpack@<version>
全局环境下安装:npm install --blobal webpack(不推荐,这会将你项目中的webpack锁定到指定版本,并且在使用不同的webpack版本的项目中,可能会导致构建失败)
安装最新体验版:npm install webpack@beta / npm install webpack/webpack#<tagname/branchname> (不推荐用于生产)
3.打开当前目录:atom ./,新建hello.js文件
4.使用webpack打包hello.js文件:webpack hello.js hello.bundle.js(打包后的文件名)
5.打包css文件时需要安装:npm install css-loader style-loader --save-dev(style-loader是可以让引入打包后的js文件的界面对这些css样式起作用,css-loader是打包时使用)
6.webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
7.文件更新时自动打包:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch
8.打包过程中的进度条:--progress
9.打包的模块:--display-modules
10.为什么打包这些文件:--display-reasons