这是一份自己用到的webpack2的配置写法,从看webpack2开始,发现自己越来越懒了,现在html文件都不想自己写了,直接自己生成。。。

哈哈,这次是可以无比完美的导入css啦

开发的时候在命令行输入

  1. webpack-dev-server --inline --hot

在上线时使用

  1. webpack -p

-p 的意思的顺便压缩代码。。。

  1. var webpack = require("webpack");
  2. var path = require("path");
  3. var extractTextPlugin = require('extract-text-webpack-plugin'); // 把css从js中独立抽离出来
  4. var HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html文件并且自动引用js
  5. module.exports = {
  6. context: __dirname + "/app/js",
  7. entry: {
  8. index: "./index.js",
  9. },
  10. devtool: "source-map",
  11. output: {
  12. // path: path.resolve(__dirname, "bundle/js");
  13. path: __dirname + "/bundle/js",
  14. filename: "[name].js"
  15. },
  16. module: {
  17. rules: [
  18. {
  19. test: /\.js|\.jsx/,
  20. exclude: /node_modules/,
  21. use: [{
  22. loader: "babel-loader",
  23. options: {
  24. presets: ["es2015", "react"]
  25. }
  26. }]
  27. },
  28. {
  29. test: /\.css$/,
  30. use: [
  31. {
  32. loader: "style-loader",
  33. options: {
  34. // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
  35. }
  36. },
  37. {
  38. loader: "css-loader",
  39. options: {
  40. // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
  41. }
  42. },
  43. // {
  44. // loader: "postcss-loader", // 添加浏览器前缀
  45. // options: {
  46. // plugins: function () {
  47. // return [
  48. // require('autoprefixer')
  49. // ]
  50. // }
  51. // }
  52. // }
  53. ]
  54. }
  55. ]
  56. },
  57. plugins: [
  58. // new webpack.optimize.CommonsChunkPlugin('common'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
  59. // new ExtractTextPlugin("[name].css"), // 抽取css
  60. // https://segmentfault.com/a/1190000007294861#articleHeader9
  61. // new HtmlWebpackPlugin({ // 自动生成index.html文件
  62. // filename: __dirname+'/bundle/index.html', // 生成的文件名
  63. // template:__dirname+'/app/index.html', // 文件模板
  64. // inject:'body', // script标签位于html文件的 body 底部
  65. // hash:true,
  66. // chunks:[__dirname+'/bundle/index.js'] // chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。chunks 默认会在生成的 html 文件中引用所有的 js 文件,当然你也可以指定引入哪些特定的文件。
  67. // }),
  68. new HtmlWebpackPlugin({
  69. title: '试题录入',
  70. template:__dirname+'/app/index.html', // 文件模板
  71. filename: __dirname + '/bundle/index.html', // 生成的文件名
  72. }),
  73. // new HtmlWebpackPlugin({
  74. // title: '试题查询',
  75. // template:__dirname+'/app/search.html', // 文件模板
  76. // filename: __dirname + '/bundle/search.html', // 生成的文件名
  77. // })
  78. ],
  79. devServer: {
  80. contentBase: __dirname,
  81. host: '0.0.0.0', // 大家都这么写。。。我也就这么写,如果地址栏写localhost的话就可以,但是使用ip地址的话就不可以
  82. port: 5005, // 启动的端口
  83. inline: true,// 使用内联方式进行热替换
  84. historyApiFallback: true, // 这个貌似没有起到什么作用。。。。。
  85. hot: true, // 开启热更新
  86. proxy: {
  87. '/pop_web/*': {
  88. target: 'http://0.0.0.0:8080',
  89. secure: false,
  90. changeOrigin: true, // 跨域
  91. // pathRewrite: {'^/pop_web' : ''}, // 替换url请求中的字段,比如此处是把pop_web字段重置为空
  92. // bypass: function(req, res, proxyOptions) { // 这个是解决当我的是单页面时,我想转发所有的请求,但是却不转发当前的html文件,我尝试写一个html
  93. 文件,但是失败了,貌似不识别,官方文档也没有说如果想要略过2html文件该怎么写。。。
  94. // if (req.headers.accept.indexOf('html') !== -1) {
  95. // console.log('Skipping proxy for browser request.');
  96. // return "app/search.html" ; // 这里就是略过的html文件了
  97. // }
  98. // }
  99. }
  100. }
  101. }
  102. }

写一份简单的webpack2 的配置文件,无比简单的更多相关文章

  1. Aooms_微服务基础开发平台实战_003_配置文件与简单的web环境搭建

    一.前言 本篇文章介绍两个重点 (1) 工程核心配置文件application.yml (2) 如何在一个标准的的SpringCloud工程上构建起一个基本的web结构 二.配置文件applicati ...

  2. POI导出时写一份到ftp服务器,一份下载给客户端

    导语: 昨天接到项目经理这么一个需求,让我在POI导出Excel的时候写一份到我之前搭建的ftp服务器上.所以就有了这篇博客首先我们来分析下之前的业务逻辑:我们创建并构造了一个workbook,然后构 ...

  3. 自己动手写CPU之第七阶段(2)——简单算术操作指令实现过程

    将陆续上传本人写的新书<自己动手写CPU>.今天是第25篇.我尽量每周四篇 亚马逊的预售地址例如以下,欢迎大家围观呵! http://www.amazon.cn/dp/b00mqkrlg8 ...

  4. MyBatis简单的增删改查以及简单的分页查询实现

    MyBatis简单的增删改查以及简单的分页查询实现 <? xml version="1.0" encoding="UTF-8"? > <!DO ...

  5. PHP分页初探 一个最简单的PHP分页代码的简单实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...

  6. 进击的Python【第十二章】:mysql介绍与简单操作,sqlachemy介绍与简单应用

    进击的Python[第十二章]:mysql介绍与简单操作,sqlachemy介绍与简单应用 一.数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数 ...

  7. java最简单的知识之创建一个简单的windows窗口,利用Frame类

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...

  8. python爬虫:爬虫的简单介绍及requests模块的简单使用

    python爬虫:爬虫的简单介绍及requests模块的简单使用 一点点的建议: (学习爬虫前建议先去了解一下前端的知识,不要求很熟悉,差不多入门即可学习爬虫,如果有不了解的,我也会补充个一些小知识. ...

  9. web.xml配置文件的简单说明

    简单说一下,web.xml的加载过程.当我们启动一个WEB项目容器时,容器包括(JBoss,Tomcat等).首先会去读取web.xml配置文件里的配置,当这一步骤没有出错并且完成之后,项目才能正常的 ...

随机推荐

  1. py-day2-5 python 百分号字符串拼接

    #### 字符串格式化. # %s 代替任何的元素 (数字,字符串,列表··) print('I live %s crty' %'my') print('I live %s crty' %'[6,8, ...

  2. insert 插入

    自动关联当前时间: GETDATE():返回当前时间和日期.

  3. Azure VMSS (3) 修改VM Template并创建VMSS

    <Windows Azure Platform 系列文章目录> 在开始本章内容之前,我们需要准备好Azure VM的镜像,具体可以参考:Azure VMSS (2) 对VM执行Genera ...

  4. 一个简单的makefile文件

    一个简单的makefile文件:可以编译指定目录下的所有c和cpp文件,暂未加入自动头文件的依赖. #!/bin/bash #编译器 CROSS_COMPILING_PATH = #源文件路径 VPA ...

  5. SAS 删除数据和对缺失值处理代码程序

    %INCLUDE '00@HEADER.SAS'; %LET dir=..\04@Model;LIBNAME cc "&dir"; %MACRO ModelVariable ...

  6. 转:通过ASP.Net页面获取域用户名(当前登陆的用户)

    通过ASP.Net页面获取域用户名(当前登陆的用户) 原文地址: https://www.cnblogs.com/fast-michael/archive/2011/03/14/2057954.htm ...

  7. first*php*self*

    要完成一个简单的php程序,首先就是要分析一下要完成所需要实现哪些功能,以及页面的整体布局,以及会涉及到的一部分数据库的函数以及SQL语句. 今天自己简要做了一个php程序,拿到手后就开始创建所能用到 ...

  8. OpenStack Trove组件WSGI和RPC调用流程(参考调用的整个过程)

    参考博文:https://blog.csdn.net/bill_xiang_/article/details/72909927

  9. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  10. <记录> Razor引擎&视图布局

    标识符 @ Razor支持HTML和C#代码混编,意味着可以在HTML中随意输出变量 基本使用方法 直接@后面跟变量(当遇到 HTML标签 .空格.换行符等特殊符号时 便认为@之后到特殊符号前为变量名 ...