webpack

webpack

现代JavaScript应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

  • 前端模块化管理和加载工具:模块化
  • 编译打包工具:打包

基于Node.js的自动化构建工具。

__dirname:当前执行脚本所在目录  

引出

  • 浏览器不能直接解析 JSX 和 ES6 语法
  • 一切皆模块

全局安装webpack,或者,仅安装到当前目录(推荐,避免版本冲突):

//全局
npm install webpack -g
//当前目录执行
npm install --save-dev webpack

需同时安装 webpack webpack-cli 

webpack若要处理js模块之外的文件,需要 loader 载,此处总结下,后续待更新

/// .css 文件
css-loader: css模块依赖解析
style-loader: 创建style标签 
/// 处理图片
url-loader
file-loader
/// 辅助编译,bable: 下一代js语法编译器(推荐将babel的配置选项放在单独的.babelrc文件中)
babel-cli 
babel-preset-env:解析ES6
babel-core:核心包 
babel-loader 
babel-preset-es2015 
babel-preset-react:解析JSX

关于配置文件,当前目录执行 npm init 会自动创建package.json文件。 

核心

  • 入口(entry)
  • 输出(output)
  • modue: loader
  • 插件(plugins)

重点关注 loader 和 plugins:

loader 

  • test:正则表达式
  • loader:‘xxx-loader’,若有多个,key值loader应该写为loaders
  • includer/exclude:
  • query:额外参数配置

注意,webpack loader的执行顺序是从右到左。

plugins

拓展webpack功能。与loaders是在打包构建过程中用来处理源文件相比,plugins是在整个构建过程中生效,执行相关的任务。

插件使用步骤:

  1. npm install 安装
  2. 配置文件中新增配置 new xxxx()

提供常用插件:

  • Hot Module Replacement(HMR):自动刷新,实时预览
  • uglifyjs-webpack-plugin:js压缩
  • ExtractTextPlugin:分离CSS和JS文件
  • HtmlWebpackPlugin:依据一个简单的index.html模板,生成一个自动引用打包后的JS文件的新index.html

其中,针对React模块,利用babel的 react-transform-hrm 插件,可以无需额外配置、方便实现热加载功能。

除此四个核心配置之外,还有其他配置参数

  • devtool:生成Source Maps,方便调试
  • devServer:配置本地开发服务器参数
  • resolve:配置短路径引用,避免路径太长

以上,参考自:入门webpack;同时推荐网上一个极好的例子,供学习。

webpack-dev-server

小型Express服务器,本质:监听代码,自动刷新

利用 webpack-dev-server 本地开发服务器,通过 localhost:8080 启动一个 express 静态资源 web 服务器,以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 即可,一个 socket.io 服务会实时监听变化并自动刷新页面。

  • 为静态文件提供服务
  • 自动刷新和热替换(HMR)
# 安装
cnpm install webpack-dev-server -g
# 运行 (--加载进度  --启用监听模式)
webpack-dev-server --progress --watch

同时需要在package.json中添加脚本

"scripts": {
    "start": "webpack-dev-server --inline --hot --config webpack.config.js",
 }

npm start 启动项目即可,其中, --hot 热替换, --inline 自动刷新。  

参考

webpack 中文文档 | webpack 中文网; 

从create-react-app学习webpack系列(一、二、三); 

posted @ 2018-07-28 01:01  万箭穿心,习惯就好。  阅读(258)  评论(0编辑  收藏  举报