github地址: https://github.com/yangstar/React-antd-webpack-dev-server

  1. var webpack = require('webpack');
  2. var path = require('path');
  3. var OpenBrowserPlugin = require('open-browser-webpack-plugin');
  4. var glob = require('glob')
  5.  
  6. //路径定义
  7. var srcDir = path.resolve(process.cwd(), 'react/entries');
  8. var distDir = path.resolve(process.cwd(), 'build');
  9. var htmlDir = path.resolve(process.cwd(), './');
  10. var nodeModPath = path.resolve(__dirname, './node_modules');
  11. var publicPath = '';
  12. //插件定义
  13. var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
  14. var HtmlWebpackPlugin = require('html-webpack-plugin');
  15. var ExtractTextPlugin = require('extract-text-webpack-plugin');
  16. var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
  17.  
  18. //入口文件定义
  19. var entries = function () {
  20. // var jsDir = path.resolve(srcDir, 'js')
  21. var entryFiles = glob.sync(srcDir + '/*.{js,jsx}')
  22. var map = {};
  23.  
  24. for (var i = 0; i < entryFiles.length; i++) {
  25. var filePath = entryFiles[i];
  26. var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
  27. map[filename] = filePath;
  28. }return map;
  29. }
  30. //html_webpack_plugins 定义
  31. var html_plugins = function () {
  32. var entryHtml = glob.sync(htmlDir + '/*.html')
  33. var r = []
  34. var entriesFiles = entries()
  35. for (var i = 0; i < entryHtml.length; i++) {
  36. var filePath = entryHtml[i];
  37. var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
  38. // console.log(entryHtml[i], filename)
  39. var conf = {
  40. template: 'html!' + filePath,
  41. filename: filename + '.html'
  42. }
  43. //如果和入口js文件同名
  44. if (filename in entriesFiles) {
  45. conf.inject = 'body'
  46. conf.chunks = ['vendor', filename]
  47. }
  48. //跨页面引用,如pageA,pageB 共同引用了common-a-b.js,那么可以在这单独处理
  49. //if(pageA|pageB.test(filename)) conf.chunks.splice(1,0,'common-a-b')
  50. r.push(new HtmlWebpackPlugin(conf))
  51. }
  52. return r
  53. }
  54.  
  55. var webpack_config = function (options) {
  56. options = options || {}
  57. var debug = options.debug !== undefined ? options.debug : true;
  58.  
  59. var plugins = [];
  60.  
  61. var extractCSS;
  62. var cssLoader;
  63. var sassLoader;
  64.  
  65. plugins.push(new CommonsChunkPlugin({
  66. name: 'vendor',
  67. minChunks: Infinity
  68. }));
  69.  
  70. if (debug) {
  71. extractCSS = new ExtractTextPlugin('css/[name].css?[contenthash]')
  72. cssLoader = extractCSS.extract(['css'])
  73. sassLoader = extractCSS.extract(['css', 'sass'])
  74.  
  75. plugins.push(extractCSS)
  76. } else {
  77. extractCSS = new ExtractTextPlugin('css/[contenthash:8].[name].min.css', {
  78. // 当allChunks指定为false时,css loader必须指定怎么处理
  79. allChunks: false
  80. })
  81. cssLoader = extractCSS.extract(['css?minimize'])
  82. sassLoader = extractCSS.extract(['css?minimize', 'sass'])
  83.  
  84. plugins.push(
  85. extractCSS,
  86. new UglifyJsPlugin({
  87. compress: {
  88. warnings: false
  89. },
  90. output: {
  91. comments: false
  92. },
  93. mangle: {
  94. except: ['$', 'exports', 'require', 'avalon']
  95. }
  96. }),
  97. new webpack.optimize.DedupePlugin(),
  98. new webpack.NoErrorsPlugin()
  99. )
  100. }
  101.  
  102. //config
  103. var config = {
  104. devServer: {
  105. historyApiFallback: true,
  106. hot: true,
  107. inline: true,
  108. progress: true,
  109. port: 8000,
  110. header: { "Access-Control-Allow-Origin": "*" },
  111. contentBase: './', //index.html所在目录
  112. proxy: {
  113. '/': {
  114.  
  115. target: 'http://10.10.11.100:8081',
  116. changeOrigin: true,
  117. secure: false
  118. }
  119. }
  120. },
  121. entry: Object.assign(entries(), {
  122. // 用到什么公共lib(例如jquery.js),就把它加进vendor去,目的是将公用库单独提取打包
  123. 'vendor': ['react', 'react-dom']
  124. }),
  125. output: {
  126. path: path.join(__dirname, "/build"),
  127. filename: "[name].js",
  128. chunkFilename: '[id].bundle.js',
  129. },
  130. module: {
  131. loaders: [{
  132. test: /\.css$/,
  133. loader: 'style-loader!css-loader'
  134. }, {
  135. test: /\.js[x]?$/,
  136. include: path.resolve(__dirname, 'react'),
  137. exclude: /node_modules/,
  138. loaders: ['react-hot', 'babel-loader?cacheDirectory'],
  139.  
  140. }, {
  141. test: /\.(png|jpg)$/,
  142. loader: 'url-loader?limit=8192'
  143. }, {
  144. test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
  145. loader: 'url'
  146. }]
  147. },
  148. resolve: {
  149. extensions: ['', '.js', '.jsx', '.css', '.scss', '.tpl', '.png', '.jpg'],
  150. root: [srcDir, nodeModPath],
  151. publicPath: '/',
  152. alias: {
  153. InnerForm: __dirname + 'xx.js',
  154. }
  155. },
  156. plugins: plugins.concat(html_plugins(),
  157. new webpack.NoErrorsPlugin(),
  158. new OpenBrowserPlugin({
  159. url: 'http://localhost:8081/dev/index.html'
  160. })
  161. )
  162. }
  163.  
  164. return config;
  165. }
  166.  
  167. module.exports = webpack_config({ debug: true })

webpack devserver proxy 配置以及react多页面的更多相关文章

  1. Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试

    Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...

  2. 跨域解决方案 - webpack devServer

    1. 定义 如果一个项目中配置了webpack, 那么我们使用 webpack devServer 来配置代理转发请求来达到解决跨域问题的目的 webpack devServer 能够解决跨域问题的根 ...

  3. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  4. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  5. webpack学习笔记--配置devServer

    devServer 1-6 使用DevServer 介绍过用来提高开发效率的 DevServer ,它提供了一些配置项可以改变 DevServer 的默认行为. 要配置 DevServer ,除了在配 ...

  6. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

  7. Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  8. webpack+react多页面开发(二)-终极架构

    webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中, ...

  9. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  10. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

随机推荐

  1. c++文件中,头文件与实现文件该写什么内容

    1. 参考https://www.cnblogs.com/fenghuan/p/4794514.html

  2. js处理url插件库query-string

    http://www.wjhsh.net/smile-fanyin-p-15016684.html

  3. Babel与webpack

    一.基础认知1 babel是js编译器,将新版本js代码转换成大多数浏览器支持的es5,es3代码 浏览器其实也不认识require函数,bable配合webpack解决模块的问题: 主要编译的是语法 ...

  4. webrtc 拥塞控制相关

    RFC8836 对实时交互式音视频应用的拥塞控制算法需求进行了较为全面的总结 延迟 拥塞控制算法应该尽可能降低延时,尤其是算法本身引入的延时.与此同时仍然需要提供可用的带宽水平. -吞吐率:在相应场景 ...

  5. jmeter测试工具安装篇

    安装jmeter之前需要安装Java环境 window系统安装java 下载jdk 安装前我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwo ...

  6. python的排序问题

    python的排序方法有两个 1 nums.sort() # 原数组上排序, 没有返回值, nums变为有序 2 # 或者 3 nums = sorted(nums) # 原数组不变, 会返回一个排好 ...

  7. apk签名之后安装失败

    Android Studio 3.0.1 很奇怪的一个现象,直接run的话可以成功,debug也可以,但是用签名打包之后,却安装失败,原来是打包的时候选错了.原来签名时,Signature Versi ...

  8. ASP脚本获取服务器全部参数列表说明

    以下是ASP获取服务器全部参数的列表说明,在做ASP网页时经常需要用到,特整理以供参考. 返回服务器地址<%=Request.ServerVariables("Url")%& ...

  9. Github的.gitignore忽略文件

    Git中有一个非常重要的一个文件-----.gitignore 1.当然如果已经push了怎么办?当然也有解决方法,如下: 有时候在项目开发过程中,突然心血来潮想把某些目录或文件加入忽略规则,按照上述 ...

  10. Oracle 计划任务批量清理临时表实例

    昨天发现近一段时间,公司某oracle库数据泵方式备份比之前慢了很多,备份集大小并未增长太多.查看了下发现该用户下存在几十万张表. 一.问题分析 1.查看用户下面的表 select count(*) ...