写一份简单的webpack2 的配置文件,无比简单
这是一份自己用到的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 的配置文件,无比简单的更多相关文章
- Aooms_微服务基础开发平台实战_003_配置文件与简单的web环境搭建
一.前言 本篇文章介绍两个重点 (1) 工程核心配置文件application.yml (2) 如何在一个标准的的SpringCloud工程上构建起一个基本的web结构 二.配置文件applicati ...
- POI导出时写一份到ftp服务器,一份下载给客户端
导语: 昨天接到项目经理这么一个需求,让我在POI导出Excel的时候写一份到我之前搭建的ftp服务器上.所以就有了这篇博客首先我们来分析下之前的业务逻辑:我们创建并构造了一个workbook,然后构 ...
- 自己动手写CPU之第七阶段(2)——简单算术操作指令实现过程
将陆续上传本人写的新书<自己动手写CPU>.今天是第25篇.我尽量每周四篇 亚马逊的预售地址例如以下,欢迎大家围观呵! http://www.amazon.cn/dp/b00mqkrlg8 ...
- MyBatis简单的增删改查以及简单的分页查询实现
MyBatis简单的增删改查以及简单的分页查询实现 <? xml version="1.0" encoding="UTF-8"? > <!DO ...
- PHP分页初探 一个最简单的PHP分页代码的简单实现
PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...
- 进击的Python【第十二章】:mysql介绍与简单操作,sqlachemy介绍与简单应用
进击的Python[第十二章]:mysql介绍与简单操作,sqlachemy介绍与简单应用 一.数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数 ...
- java最简单的知识之创建一个简单的windows窗口,利用Frame类
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...
- python爬虫:爬虫的简单介绍及requests模块的简单使用
python爬虫:爬虫的简单介绍及requests模块的简单使用 一点点的建议: (学习爬虫前建议先去了解一下前端的知识,不要求很熟悉,差不多入门即可学习爬虫,如果有不了解的,我也会补充个一些小知识. ...
- web.xml配置文件的简单说明
简单说一下,web.xml的加载过程.当我们启动一个WEB项目容器时,容器包括(JBoss,Tomcat等).首先会去读取web.xml配置文件里的配置,当这一步骤没有出错并且完成之后,项目才能正常的 ...
随机推荐
- WPF项目中解决ConfigurationManager不能用(转)
https://blog.csdn.net/MOESECSDN/article/details/78107888 在WPF项目中遇到这样的问题,做一下笔记.希望对自己和读者都有帮助. 在aap.con ...
- 代码回滚:Reset、Checkout、Revert的选择
代码回滚:Reset.Checkout.Revert的选择 Git仓库有三个主要组成——工作目录,缓存区和提交历史. 从图中我们可以看出,缓存区或者叫索引,其实是指一整套即将被下一个提交的文件集合.也 ...
- C# 代码小技巧
一 .自动属性. 1.vs下输入prop,Tab键就出现了. 2.有了自动属性,我们不用再额外为一个类的每个公共属性定义一个私有字段(实际上没多大用处的字段), 但是通过反射还是可以看到对应的私有 ...
- Struts1 不能进入Action,页面空白问题解决
http://blog.csdn.net/barry_liao/article/details/35592935 Struts1 不能进入Action,页面空白问题解决 标签: Struts1Acti ...
- EasyMock 模拟对象测试
一.EasyMock 使用动态代理实现模拟对象创建,一般可以满足以下测试需求 1.要测试的模块依赖于其它自己控制不了的模块,如第三方服务,其它组员在开发的服务等,它们都没办法配合你来测试: 2.涉及到 ...
- 读书笔记——《redis入门指南(第2版)》第三章 入门
3 .redis的5种数据类型及相应命令 redis不区分命令大小写. string 512m 一个散列类型键可包含至多232-1个字段 一个列表类型键最多能容纳232-1个元素 一个集合类型键最多能 ...
- 涂抹mysql笔记-mysql复制特性
<>mysql复制特性:既可以实现整个服务(all databases)级别的复制,也可以只复制某个数据库或某个数据库中的某个指定的表对象.即可以实现A复制到B(主从单向复制),B再复制到 ...
- ARM920T的Cache
转载自:http://www.eefocus.com/mcu-dsp/242034 ARM920T有16K的数据Cache和16K的指令Cache,这两个Cache是基本相同的,数据Cache多了一些 ...
- Android 开发 AlarmManager 定时器
介绍 AlarmManager是Android中常用的一种系统级别的提示服务,在特定的时刻为我们广播一个指定的Intent.简单的说就是我们设定一个时间,然后在该时间到来时,AlarmManager为 ...
- python下selenium自动化测试自我实践
周末实验自动化提交数据时,本来没打算写记录的,不过遇到一些问题,觉得可以提提.基本操作就不用写了,搜索过程中都发现了两个博客都出了selenium+python的书,说明操作一搜一大把. 1. 等待页 ...