React(10)-- 构建工具Webpack
2016-10-16 15:11
423 查看
React 程序开发中,最具重复性的工作:对所有 React 组件允许 JSX解析器;将所有模块打包成分发到浏览器中使用。
2款流行的 JavaScript 构建工具:Browserify & ]Webpack] (主要学习)
1、一个打包工具
2、一个模块加载工具,各种资源都可以当作模块来处理。
能被模块化的不仅仅是 JS 了。
开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
扩展性强,插件机制完善,特别是支持 React 热插拔(react-hot-loader )的功能让人眼前一亮。
npminstallwebpack−g如果是常规项目还是把依赖写入package.json中更合理: npm install
$ npm install webpack –save-dev
2、配置
每个项目下都必须有一个 webpack.config.js(配置项),用于告诉 webpack 它需要做什么。
解析:
(1)plugins 是插件项 ,这里我们使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。
更多 webpack 的插件
(2)entry 入口文件配置项,output 对应输出配置项;(入口文件最终要生成什么名字的文件、存放位置)
(3) module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理:
“-loader”其实是可以省略不写的,多个loader之间用“!”连接起来。
test 用来匹配相对应文件的正则表达式;loaders 告诉webpack要利用哪种加载器来处理test所匹配的文件
注意所有的加载器都需要通过 npm 来加载,$ npm install xxx-loader –save-dev,并建议查阅它们对应的 readme 来看看如何使用。
(4) 最后是 resolve 配置:
大家可以参考这里:
Webpack 详细配置
3、webpack–watch(监听变动,并自动打包)4、 webpack -p(重要:压缩脚本)
5、$ webpack -d(生成map映射文件,告知哪些模块被最终打包的位置)
样式都不用引入,毕竟脚本执行时会动态生成
2、JS
各脚本模块可以直接使用 commonJS 来书写,并可以直接引入未经编译的模块,比如 JSX、sass、coffee等(只要你在 webpack.config.js 里配置好了对应的加载器)。
2、一小时包会webpack
3、WebPack 简明学习教程
等等资料
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、安装:npminstallwebpack−g如果是常规项目还是把依赖写入package.json中更合理: npm install
$ 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 简明学习教程
等等资料
相关文章推荐
- 深入浅出的webpack4构建工具--webpack4+react构建环境(二十)
- 使用Webpack构建React应用
- 用React & Webpack构建前端新闻网页
- React学习实例总结,包含yeoman安装、webpack构建
- 【构建工具】webpack文件配置
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件
- React-route和Webpack快速构建一个react程序
- 从零开始,教你用Webpack构建React基础工程
- 前端自动化构建工具Webpack开发模式入门指南 (网上看到的,写得很详细)
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 从零开始,教你用Webpack构建React基础工程
- 使用React-route和Webpack快速构建一个react程序
- 从零开始,教你用Webpack构建React基础工程
- 使用React和webpack工具实现自己的博客页面
- [react001] 使用webpack自动构建react 项目
- 前端构建之webpack+react使用
- React(10)--构建工具
- 基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
- webpack前端构建工具学习总结(二)之loader的使用