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

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

开发的时候在命令行输入

webpack-dev-server --inline --hot

在上线时使用

webpack -p

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

var webpack = require("webpack");
var path = require("path");
var extractTextPlugin = require('extract-text-webpack-plugin'); // 把css从js中独立抽离出来
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html文件并且自动引用js
module.exports = {
context: __dirname + "/app/js",
entry: {
index: "./index.js",
},
devtool: "source-map",
output: {
// path: path.resolve(__dirname, "bundle/js");
path: __dirname + "/bundle/js",
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js|\.jsx/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ["es2015", "react"]
}
}]
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
},
{
loader: "css-loader",
options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
},
// {
// loader: "postcss-loader", // 添加浏览器前缀
// options: {
// plugins: function () {
// return [
// require('autoprefixer')
// ]
// }
// }
// }
]
}
]
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin('common'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
// new ExtractTextPlugin("[name].css"), // 抽取css
// https://segmentfault.com/a/1190000007294861#articleHeader9
// new HtmlWebpackPlugin({ // 自动生成index.html文件
// filename: __dirname+'/bundle/index.html', // 生成的文件名
// template:__dirname+'/app/index.html', // 文件模板
// inject:'body', // script标签位于html文件的 body 底部
// hash:true,
// chunks:[__dirname+'/bundle/index.js'] // chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。chunks 默认会在生成的 html 文件中引用所有的 js 文件,当然你也可以指定引入哪些特定的文件。
// }),
new HtmlWebpackPlugin({
title: '试题录入',
template:__dirname+'/app/index.html', // 文件模板
filename: __dirname + '/bundle/index.html', // 生成的文件名
}),
// new HtmlWebpackPlugin({
// title: '试题查询',
// template:__dirname+'/app/search.html', // 文件模板
// filename: __dirname + '/bundle/search.html', // 生成的文件名
// })
],
devServer: {
contentBase: __dirname,
host: '0.0.0.0', // 大家都这么写。。。我也就这么写,如果地址栏写localhost的话就可以,但是使用ip地址的话就不可以
port: 5005, // 启动的端口
inline: true,// 使用内联方式进行热替换
historyApiFallback: true, // 这个貌似没有起到什么作用。。。。。
hot: true, // 开启热更新
proxy: {
'/pop_web/*': {
target: 'http://0.0.0.0:8080',
secure: false,
changeOrigin: true, // 跨域
// pathRewrite: {'^/pop_web' : ''}, // 替换url请求中的字段,比如此处是把pop_web字段重置为空
// bypass: function(req, res, proxyOptions) { // 这个是解决当我的是单页面时,我想转发所有的请求,但是却不转发当前的html文件,我尝试写一个html
文件,但是失败了,貌似不识别,官方文档也没有说如果想要略过2个html文件该怎么写。。。
// if (req.headers.accept.indexOf('html') !== -1) {
// console.log('Skipping proxy for browser request.');
// return "app/search.html" ; // 这里就是略过的html文件了
// }
// }
}
}
}
}

写一份简单的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. redis 4.x 安装哨兵模式 sentinel

    1.下载 http://download.redis.io/releases/redis-4.0.11.tar.gz 2.解压 tar zxvf redis-4.0.11.tar.gz 3.安装 cd ...

  2. sql job定时备份数据库

    ---------------------------------------- 对TestDB1进行备份 ---------------------------------------- decla ...

  3. linux系统常用的基本命令分类

    linux系统常用的基本命令分类: 文件命令:vim vimdiff diff mkdir touch rm mv cp ln cd ls more less head tail cat grep e ...

  4. win7 80端口被iis占用

    下载iis管理器,打开,关闭80端口占用

  5. 【亲测】502 Bad Gateway 怎么解决?

    502 Bad Gateway 怎么解决? 1.什么是502 badgateway 报错 简单来说 502 是报错类型代码,bad gateway 错误的网关. 2.产生错误的原因 连接超时 具体原因 ...

  6. pass parameter by endpoint, this is for websocket

    使用了Java的字符串:@ServerEndpoint("/chat/{room}")public class MyEndpoint {@OnMessagepublic void ...

  7. VS2015密匙--VS2015打开丢失msvcp140.dll--cannot find one or more components ,please reinstall the application

    win7旗舰版 64位 + vs2015 专业版 1.安装VS2015过程中可能需要用到的VS2015专业版钥匙:(测试,可用) HMGNV-WCYXV-X7G9W-YCX63-B98R2 2.VS2 ...

  8. RocketMQ入门(Filter)_5

    RocketMQ中存储的消息对于消费者来说,并不完全都是他们需要的,因此需要对消息进行过滤. 订阅Topic主题 ,选择Tags都是我们简单的过滤.Topic是大分类,Tags是二级分类. Rocke ...

  9. 关于six.with_metaclass(ABCMeta, object)的理解

    在学习Python过程中,看到了生成虚基类的方式, class PeopleBase(six.with_metaclass(ABCMeta, object)): @abstractmethod def ...

  10. Maven项目中遇到的问题及其解决方案

    Maven中pom报红 1.jdk版本是否符合要求? 2.maven的本地confg中的setting.xml中是否和要求的jdk版本一致? 3.maven本地仓库路径是否正确,即为自己的确定的仓库位 ...