-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
129 lines (125 loc) · 2.95 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pxtorem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const path = require('path');
const theme = require('./package.json').theme;
const postcssOpts = {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
pxtorem({
rootValue: 100,
propList: ['*']
})
]
};
module.exports = {
// 页面入口文件配置
entry: __dirname + '/src/index.js',
devtool: 'eval-source-map',
// 入口文件输出配置
output: {
path: __dirname + '/', // 打包后的文件存放的地方
publicPath: '/',
filename: 'js/index-[hash].js' // 打包后输出文件的文件名
},
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), "node_modules"],
extensions: ['.web.js', '.jsx', '.js', '.json'],
},
module: {
rules: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader', // babel的配置在.babelrc文件中
},
{
test: /\.(png|jpg|gif|woff|eot|ttf)$/,
loader: "url-loader?limit=8192"
},
{
test: /\.(svg)$/i,
loader: 'svg-sprite-loader',
include: [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
path.resolve(__dirname, './src/public/svg'), // 自己私人的 svg 存放目录
]
},
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: postcssOpts
},
{
loader: 'less-loader',
options: {
modifyVars: theme
}
}
]
},
{
test: /\.scss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: postcssOpts
},
'sass-loader'
]
}, {
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: postcssOpts
}
]
}
]
},
plugins: [
new LodashModuleReplacementPlugin({
collections: true,
paths: true
}),
new HtmlWebpackPlugin({
template: __dirname + "/src/index.html" //new 一个这个插件的实例,并传入相关的参数
}),
new webpack.HotModuleReplacementPlugin(), //热加载插件3
new ExtractTextPlugin("css/[name]-[hash].css"),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/[name]-[hash].js',
minChunks: 2
})
],
devServer: {
contentBase: './build', // 本地服务器所加载的页面所在的目录
host:'localhost',
port: 8888,
historyApiFallback: true,
inline: true, // 实时刷新
hot: true,
proxy: {
}
},
}