文档章节

webpack配置

百里求一
 百里求一
发布于 2015/12/10 20:44
字数 453
阅读 31
收藏 1
 1 var webpack = require('webpack');
 2 var path = require("path");
 3 module.exports = {
 4     // context: __dirname + "/src",//The base directory (absolute path!)
 5     // 表示入口文件
 6     cache: true,
 7     entry: {
 8         'bundle': './src',
 9         // 'app2': '/src/app2'
10     },
11     minimize: true,
12     // 表示输出文件
13     output: {
14         path: path.join(__dirname, "build"),// 编译好的文件目录
15         filename: '[name].min.js',
16         chunkFilename: "[chunkhash].min.js"
17         // sourceMapFilename: '[file].map'
18         // publicPath: "/build/" // 引用你的文件时考虑使用的地址
19     },
20     // 表示这个依赖项是外部lib,遇到require它不需要编译,
21     // 且在浏览器端对应window.React
22     externals: [
23         {
24             'react': 'window.React',
25             'react-bootstrap': 'window.ReactBootstrap',
26             'jquery': 'window.jQuery'
27         }
28     ],
29 
30     module: {
31         loaders: [
32             // 凡是遇到jsx结尾的,都用jsx-loader这个插件来加载,
33             // 且启用harmony模式
34             //{ test: path.join(__dirname, 'es6'), loader: 'babel-loader' },'jsx-loader?harmony'
35             { test: /\.js$/, loader: 'babel-loader!jsx-loader?harmony' },
36             { test: /\.jsx$/, loader: "jsx-loader?insertPragma=React.DOM" },
37             { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
38             { test: /\.css$/, loader: 'style-loader!css-loader' },
39             { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
40 
41             // required for bootstrap icons
42             { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
43             { test: /\.ttf$/, loader: "file-loader?prefix=font/" },
44             { test: /\.eot$/, loader: "file-loader?prefix=font/" },
45             { test: /\.svg$/, loader: "file-loader?prefix=font/" }
46 
47         ]
48     },
49     resolve: {
50         // 现在可以写 require('file') 代替 require('file.coffee')
51         extensions: ['', '.webpack.js', '.coffee', '.json', '.js', '.jsx'],
52         modulesDirectories: [
53             'node_modules',
54             'bower_components',
55             'lib',
56             'src'
57         ]
58         // alias: {
59         //     // Bind version of jquery
60         //     jquery: "jquery-2.0.3",
61 
62         //     // Bind version of jquery-ui
63         //     "jquery-ui": "jquery-ui-1.10.3",
64 
65         //     // jquery-ui doesn't contain a index file
66         //     // bind module to the complete module
67         //     "jquery-ui-1.10.3$": "jquery-ui-1.10.3/ui/jquery-ui.js",
68         // }
69     },
70     devtool: 'source-map',
71     plugins: [
72         new webpack.DefinePlugin({// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
73             __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
74             __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
75         }),
76         new webpack.optimize.UglifyJsPlugin(),
77         new webpack.optimize.CommonsChunkPlugin('common.min.js', 5),
78         new webpack.ProvidePlugin({
79             // Automtically detect jQuery and $ as free var in modules
80             // and inject the jquery library
81             // This is required by many jquery plugins
82             $: "jquery",
83             jQuery: "jquery",
84             "window.jQuery": "jquery"
85         })
86     ]
87 };

 

本文转载自:http://www.cnblogs.com/bergus/p/4820435.html

上一篇: 学习资料备忘录
下一篇: groovy 弹出菜单
百里求一
粉丝 0
博文 29
码字总数 2218
作品 0
普陀
程序员
私信 提问
webpack多页面配置记录

之前也写过webpack学习记录,项目中需要一个常用的webpack多页面配置,所以才动手,本着能写一行是一行的原则,开始了配置webpack之旅。 定目录结构 首先我只需要开发环境(包含自动更新)和...

走路不看手机
2018/01/19
0
0
Webpack 4.x 配置教程

Webpack进入了 4.x 版本,紧跟着对开发者的配置能力有了一些新的要求。今天我们看一下 Webpack 4.x 下的配置工作该如何进行。 安装 webpack 和 webpack-cli 安装 npm 包,分为全局安装和本地...

fengjiangjun
06/02
0
0
【翻译】Webpack 4 教程:从0配置到生产模式

原文链接:Webpack 4 Tutorial: from 0 Conf to Production Mode webpack 4 问世了! 这个流行的模块打包工具进行了大规模的升级。 webpack4,有什么更新?大幅度的性能优化,零配置和明智的...

Skandar-Ln
2018/05/15
0
0
Webpack入门到精通(1)

前言 什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中...

励步前端团队
05/21
0
0
webpack入门学习笔记02 —— 初始化一个webpack项目

1. 写在前面 现在我们就开始正式学习 webpack 了,webpack是帮助我们打包编译项目的,所以在正式开始之前,我们需要初始化一个基于webpack的项目。 在本篇博客中,将会涉及到以下的知识点: ...

振礼硕晨
06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1。 1 autocomplete属性 autocomplete属性规定form或input域应该拥有自动完成功能,当用户在自动完成域中开始输入时,浏览器...

老码农的一亩三分地
47分钟前
5
0
OSChina 周五乱弹 —— 葛优理论+1

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享米津玄師的单曲《LOSER》: mv中的舞蹈诡异却又美丽,如此随性怕是难再跳出第二次…… 《LOSER》-...

小小编辑
今天
1K
16
nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
15
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部