-
Notifications
You must be signed in to change notification settings - Fork 4
/
webpack.config.js
68 lines (66 loc) · 2.78 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var JSXPath = './dev/js';
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ROOT = 'http://localhost:3000/';
module.exports = {
//配置服务器
//webpack-dev-server有两种启动模式:
//iFrame:该模式下修改代码后会自动打包,但是浏览器不会自动刷新
//inline:内联模式,该模式下修改代码后,webpack将自动打包并且刷新浏览器,让我们看到最终的修改
devServer: {
contentBase:'./build',
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
//页面入口文件配置
entry: {//需要打包的JS,支持数组
index : JSXPath+'/main.jsx',
common :['react','react-dom','react-router']
},
//入口文件输出配置
output: {
path: 'build',
//publicPath: "build/",// 网站运行时的访问路径
filename: '/js/[name].js'
},
resolve: {
//root: 'E:/webpack_and_gulp_react/', //绝对路径
extensions: ['', '.js', '.jsx', '.scss'] //require 的时候,可以不用写文件类型
// alias : {//定义别名
// jquery: "./scripts/jquery.min.js" // require('./scripts/jquery.min.js');可以设置为 require('jquery');
// }
},
module: {
//加载器配置
//凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理
loaders: [
{
test:/\.jsx?$/,
loader: 'babel',
exclude:/(node_modules)/,
query:{
presets:['react','es2015']
}
},
{test: /\.scss$/, loader: "style!css!sass"},
{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer")}
]
},
//插件项
plugins: [//将外部的包导出成一个公用的文件比如 jquery,react, react-dom 等
new webpack.optimize.CommonsChunkPlugin('common','/js/common.js'),
new HtmlwebpackPlugin({
title: 'BBD',
template:'./dev/index.html', //html模板路径
filename: 'index.html',
inject:true, //允许插件修改哪些内容,包括head与body
hash:true //为静态资源生成hash值
}),//添加我们的插件 会自动生成一个html文件
new webpack.BannerPlugin('This file is created by Mantou'),
new ExtractTextPlugin("./build/css/styles.css")
// new webpack.optimize.CommonsChunkPlugin({name: 'commons'}) //多个JS合并成一个JS
]
};