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'
}
}
};
这里使用了一个CommonsChunkPlugin的插件,用于提取多个入口文件的公共脚本部分,然后生成一个common.js文件,方便多页面之间进行复用。
loaders
loaders是关键的配置项,如上面的-loader中的loader是可以省略不写的,loader之间通过"!"链接。
webpack配置示例的更多相关文章
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- Webpack 配置示例
Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- webpack 配置分离css插件
以css配置示例,less与sass同理 1. 使用旧版的ExtractTextPlugin插件 安装 npm install extract-text-webpack-plugin@next --s ...
- 通用、封装、简化 webpack 配置
通用.封装.简化 webpack 配置 现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态.但在创建一个项目的时候,总是免不了要配置 webpac ...
- Element源码:项目初始化和webpack配置
0x00.项目初始化 由于整个过程像素级 copy element,所以将不使用vue-cli初始化项目. 创建项目 新建一个空的文件夹,使用npm init 来初始化项目,并安装vue模块. 修改目 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack配置详解
webpack配置详解 先点个赞吧,再挨个点下面的连接,觉得不值这个赞的回来骂我啊. Webpack傻瓜式指南(一) Webpack傻瓜指南(二)开发和部署技巧 Webpack傻瓜式指南 原生的官网详 ...
随机推荐
- Robotutor Scratch3.0 在线编程平台升级啦!
Robotutor推出的Scratch3.0在线编程平台受到很多编程老师和学员的喜爱,上一个版本我们提供了用户注册,找回密码,个人项目的在线保存和浏览,社区分享评论. 我们根据实际的教学需要,用户角色 ...
- 使用form 表单 弹出登录框,只传递数据,不刷新界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java第一节课考试
1 package kaoshi; import java.util.Scanner; public class ScoreInformation { Scanner input=new Scanne ...
- 详解如何实现斗鱼、B站等全局悬浮窗直播小窗口
最近业务需求需要我们直播返回或者退出直播间时,开一个小窗口在全局继续直播视频,先看效果图. 调研了一下当下主流直播平台,斗鱼.BiliBili等app,都是用WindowManger做的(这个你可以在 ...
- SQL的模糊查询(转载)
本文由转载而来: 原文地址链接:http://www.cnblogs.com/GT_Andy/archive/2009/12/25/1921914.html 在进行数据库查询时,有完整查询和模糊查询之 ...
- cat、head、sed 三盟友
在linux 中我们必不可少的会使用到这三个命令 他们有什么作用呢? 就是查看文档了,但他的功能远不止于此 来我们学习一下吧 cat [root@ESProbe ~]# cat --help Usag ...
- video.js 视频自动全屏播放
1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...
- FFmpeg SDK for iOS
FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的跨平台开源计算机程序. 很多平台视频播放器都是使用FFmpeg来开发的,FFmpeg官方并没有为各个平台提供编译好的SDK,所以使 ...
- c# winform 访问WebServices 服务(通过WEB引用的方式进行访问)
第一步.Winform项目引用WEB服务 第二步.代码声明实例化 Web引用 YzServ.TestServ yzserv = new WebYzServ.TestServ(); yzserv.AAA ...
- 脏牛提权CVE-2016-5195
gcc -pthread dirtyc0w.c -o dirtyc0w 尝试使用gcc -pthread dirtyc0w.c -o dirtyc0w 编译该POC文件 gcc命令是一个编译器套件,可 ...