var path = require('path')
//引用内部文件
var webpack = require('webpack') //引用内部文件
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引用外 部文件
var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //引用外 部文件
module.exports = {
entry: path.resolve(__dirname, 'app/index.jsx'), //输入文件
output: {
filename: "bundle.js" //输出文件
},
resolve:{
extensions:['', '.js','.jsx']
},
module: {
{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
{ test: /\.css$/, exclude: /node_modules/, loader: 'style!css! postcss' }, //这里配置了,出现这种情况时候,走下面红色的配置
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' }, // 限制大小5kb
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
]
},
postcss: [
require('autoprefixer') //调用autoprefixer插件,例如 display: flex
],
plugins: [
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
}),
// 热加载插件
new webpack.HotModuleReplacementPlugin(),
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式(dev模式下可以提示错误、测试报告等, production模式不提示)
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
],
//常用配置
devServer: {
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转,在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
inline: true, //实时刷新
hot: true // 使用热加载插件 HotModuleReplacementPlugin
}
}
var webpack = require('webpack') //引用内部文件
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引用外 部文件
var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //引用外 部文件
module.exports = {
entry: path.resolve(__dirname, 'app/index.jsx'), //输入文件
output: {
filename: "bundle.js" //输出文件
},
resolve:{
extensions:['', '.js','.jsx']
},
module: {
loaders: [
//loader:加载器,和spring里面的加载限制很像 ,其中test表示检测,后面的表示执行情况
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
{ test: /\.css$/, exclude: /node_modules/, loader: 'style!css! postcss' }, //这里配置了,出现这种情况时候,走下面红色的配置
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' }, // 限制大小5kb
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
]
},
postcss: [
require('autoprefixer') //调用autoprefixer插件,例如 display: flex
],
plugins: [
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
}),
// 热加载插件
new webpack.HotModuleReplacementPlugin(),
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式(dev模式下可以提示错误、测试报告等, production模式不提示)
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
],
//常用配置
devServer: {
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转,在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
inline: true, //实时刷新
hot: true // 使用热加载插件 HotModuleReplacementPlugin
}
}