Webpack2初学总结
Webpack
webpack简单点来说就就是一个模块打包器,它能够将不同类型的资源文件、不同类型的模块都打包成js文件,通过模块、插件定制配置。
Webpack VS Browserify/Grunt/Gulp
Grunt/Gulp 更偏向于task-runner 任务管理
Browserify 则更多的作为包管理
Webpack能够集模块打包、代码分离、代码清理等作用于一体
安装
npm install -g webpack
此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。
通常我们会将 Webpack安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。npm install webpack --save-dev
$ npm info webpack //查看 webpack 版本信息
其他package
http-server
作为npm的库,简单零配置的http服务端,既可用来作为实际生产,又存在易上手与测试的优点。
npm install http-server -g //安装
使用:
http-server [path] [options]
[path] 默认 ./public(如果存在)否则为当前目录
然后可以输入地址http://localhost:8080
参数
-p 端口号 (默认 8080)
-a IP 地址 (默认 0.0.0.0)
-d 显示目录列表 (默认 'True')
-i 显示 autoIndex (默认 'True')
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
-s or --silent 禁止日志信息输出
--cors 启用 CORS via the Access-Control-Allow-Origin header
-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10 10s (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl 启用 https
-C or --cert ssl cert 文件路径 (default: cert.pem)
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')
-h or --help 打印以上列表并退出
rimraf
A rm -rf
util for nodejs
配置
Webpack也可用CLI的方式编译,不过大多还是使用配置文件。
webpack.config.js配置文件主要分为四大块
entry 入口文件 让webpack用哪个文件作为项目的入口
output 出口 让webpack把处理完成的文件放在哪里
module 模块 转换各种类型的文件为模块
plugin 插件 对编译生成的文件进行分离、编译、后处理等
热加载 VS 热替换
live/hot reload 热加载,即不需要重启浏览器,修改代码直接生效webpack --watch
热替换 hot module replacement(HMR)$ npm install webpack-dev-server --save-dev
$ npm install webpack --save-dev
Windows下需要本地安装Webpack才能使用Webpack-dev-server,然后在package.json中修改脚本命令webpack-dev-server
可以启动
模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载页面。这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间。
配置dev-server.js
1 | var WebpackDevServer = require('Webpack-dev-server'); |
生产环境与开发环境
但是在生产环境下不需要热替换,可以添加环境变量NODE_ENV来区分
支持ES6
npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-cli --save-dev
要在cli中编译ES6,一方面需要看Node.js是否支持ES6的新语法,如果都支持可以直接Node编译,越新的版本支持特性越多;另外可以使用babel编译转换成ES5或者直接运行(babel-cli)
babel是能够将ES6进行转换的转换器
.babelrc配置文件,presets配置具体
"presets": [
["es2015",{"modules": false}],
"stage-0"
]
支持sourcemap
devtool: source-map
assets不同资源的加载
file-loader
npm install file-loader --save-dev
url-loader
npm install url-loader --save-dev
url-loader是对file-loader的上层封装,比如webpack中对图片的加载器配置{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
这样在小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。
样式表
css-loader style-loader postcss-loader
流程是 css-loader (将require/import格式转化成css中的import或者url)-> style-loader(将css插入到生成的js中) -> postcss-loader进行后处理(加前缀 autoprefixer)
sass-loader
scss/sass转换成css
CSS Modules
css的模块特性
extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin
Extract text from a bundle, or bundles, into a separate file.
将生成的css样式从JS文件中抽离出,生成css文件
uglify插件
code-elimination 清理无用代码
tree-shaking 例如去掉if(true)
DefinePlugin
html-webpack-plugin
npm install --save-dev html-webpack-plugin
html模板
third party module
可用config.externals
其他
path.join() 用合适的连接符连接传入参数组成路径
path.resolve() 将第一个参数作为base路径,最后一个作为相对路径连接起来作为绝对路径
AngularJS+Webpack
这是我个人的Webpack+AngularJS 方案
https://github.com/GuoXiaoyang/ShowLocalWeather
总结
个人理解Webpack对工程上的一体构建很方便,解放了脑生产力。写的比较乱,主要是还不了解一些流程和概念,大概会用而已。
另外由于包的版本太多,配置也不尽相同,如果稳定了个人配置,建议不要轻易更换大版本。
等把这个理解得更为透彻,再更新该文章。
注:本篇文章的图都是引用Emil Oberg的教程里的。