React(10)-- 构建工具Webpack
来源:互联网 发布:阿塞拜疆程序员 编辑:程序博客网 时间:2024/06/08 02:28
React 程序开发中,最具重复性的工作:对所有 React 组件允许 JSX解析器;将所有模块打包成分发到浏览器中使用。
2款流行的 JavaScript 构建工具:Browserify & ]Webpack] (主要学习)
Webpack 是什么?
webpack 是一款模块加载器 兼 打包工具,它能把各种资源(JS、JSX、TypeScript、coffe、less、sass、图片等)都作为模块来使用和处理,总得来说:
1、一个打包工具
2、一个模块加载工具,各种资源都可以当作模块来处理。
Webpack 的优势?
- webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了。
- 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
- 扩展性强,插件机制完善,特别是支持 React 热插拔(react-hot-loader )的功能让人眼前一亮。
Webpack 安装配置
1、安装:
$ npm install webpack –save-dev
2、配置
每个项目下都必须有一个 webpack.config.js(配置项),用于告诉 webpack 它需要做什么。
var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './src/js/page/index.js' }, //入口文件输出配置 output: { path: 'dist/js/page', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'jsx-loader?harmony' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //其它解决方案配置 resolve: { root: 'E:/github/flux-example/src', //绝对路径 extensions: ['', '.js', '.json', '.scss'], alias: { AppStore : 'js/stores/AppStores.js', ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } }};
解析:
(1)plugins 是插件项 ,这里我们使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。
更多 webpack 的插件
(2)entry 入口文件配置项,output 对应输出配置项;(入口文件最终要生成什么名字的文件、存放位置)
{ entry: { page1: "./page1", //支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出 page2: ["./entry1", "./entry2"] }, //生成一个 page1.bundle.js 和 page2.bundle.js,并存放到 ./dist/js/page 文件夹下。 output: { path: "dist/js/page", filename: "[name].bundle.js" }}
(3) module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理:
module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, //.js 文件使用 jsx-loader 来编译处理 { test: /\.js$/, loader: 'jsx-loader?harmony' }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //图片文件使用 url-loader 来处理,小于8kb的直接转为base64(其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)。 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }
“-loader”其实是可以省略不写的,多个loader之间用“!”连接起来。
test 用来匹配相对应文件的正则表达式;loaders 告诉webpack要利用哪种加载器来处理test所匹配的文件注意所有的加载器都需要通过 npm 来加载,$ npm install xxx-loader –save-dev,并建议查阅它们对应的 readme 来看看如何使用。
(4) 最后是 resolve 配置:
resolve: { //查找module的话从这里开始查找 root: 'E:/github/flux-example/src', //绝对路径 //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名 extensions: ['', '.js', '.json', '.scss'], //模块别名定义,方便后续直接引用别名,无须多写长长的地址 alias: { AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可 ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } }
大家可以参考这里:
Webpack 详细配置
Webpack 的运行
1、
webpack–display−error−details(加上–display−error−details方便找错)2、 webpack –config webpack.config2.js(使用另一份配置文件打包)
3、webpack–watch(监听变动,并自动打包)4、 webpack -p(重要:压缩脚本)
5、$ webpack -d(生成map映射文件,告知哪些模块被最终打包的位置)
Webpack 的使用
1、HTML
样式都不用引入,毕竟脚本执行时会动态生成
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>demo</title></head><body> <script src="dist/js/page/common.js"></script> <script src="dist/js/page/index.js"></script></body></html>
2、JS
各脚本模块可以直接使用 commonJS 来书写,并可以直接引入未经编译的模块,比如 JSX、sass、coffee等(只要你在 webpack.config.js 里配置好了对应的加载器)。
// index.js 内容:require('../../css/reset.scss'); //加载初始化样式require('../../css/allComponent.scss'); //加载组件样式var React = require('react');var AppWrap = require('../component/AppWrap'); //加载组件var createRedux = require('redux').createRedux;var Provider = require('redux/react').Provider;var stores = require('AppStore');var redux = createRedux(stores);var App = React.createClass({ render: function() { return ( <Provider redux={redux}> {function() { return <AppWrap />; }} </Provider> ); }});React.render( <App />, document.body);
Webpack 还有许多很强大的功能没有说明,大家可以参考:
1、webpack 学习之路
2、一小时包会webpack
3、WebPack 简明学习教程
等等资料
- React(10)-- 构建工具Webpack
- React(10)--构建工具
- react+webpack构建步骤
- React+Webpack构建环境
- webpack构建react项目
- 打包工具(构建工具)-webpack
- Webpack&React (九) 构建Kanban
- 使用Webpack构建React应用
- React配合Webpack构建项目
- Webpack构建React基础工程
- react 实战案例(webpack构建)
- webpack构建工具安装
- webpack构建工具
- 【小作品】react构建简单SPA(react+webpack+router+es6)
- ES6+React+Webpack初步构建项目流程
- 前端构建之webpack+react使用
- React+Webpack+Nodejs+Express快速构建项目
- webpack构建React应用一:创建项目
- C++ &引用用法
- bzoj1502(二分)
- js获取html元素宽度的思考
- 第29周-鸟哥的Linux私房菜基础篇第三版-第四章 安装CentOS
- 来自Google的TCP BBR拥塞控制算法解析
- React(10)-- 构建工具Webpack
- 《Python Web开发实战》读书笔记一
- 洛谷 P3407 散步 (二分答案+判定 或 模拟)
- PCI与PCI_E介绍
- IPv6
- iframe自适应,跨域,JS的document.domain
- 小米应用和网页真有点pain in the ass的感觉
- 求职那些事儿
- kali linux1.10安装搜狗输入法