const?path?=?require('path')
const?VueLoaderPlugin?=?require('vue-loader/lib/plugin')
const?isDev?=?process.env.NODE_ENV?===?'development';
const?HTMLPlugin?=?require('html-webpack-plugin');
const?webpack?=?require('webpack');
//?const?ExtractPlugin=require('mini-css-extract-plugin')
const?ExtractPlugin=require('extract-text-webpack-plugin')
//?ExtractPlugin
//?const?MiniCssExtractPlugin?=?require('mini-css-extract-plugin')
//?定義輸出模塊
//?module.exports
const?config??={
target:'web',
//?拼接路徑，使其成為絕對路徑
entry:?path.join(__dirname,'./src/index.js'),
output:?{
????filename:?'bundle.js',
????path:?path.join(__dirname,'./dist')
},
module:?{
????rules:?[
??????{
????????test:?/\.vue$/,
????????loader:?'vue-loader'
??????},
??????{
????????test:?/\.css$/,
????????use:?[
????????'style-loader',
????????'css-loader'
????????]
??????},
{
test:/\.styl(us)?$/,
????????use:?ExtractPlugin.extract({
????????fallback:?'style-loader',
????????use:[
??????????{loader:'css-loader'},
{
loader?:?'postcss-loader',
options:??{
sourceMap:?true,
}
},
??????????{loader:'stylus-loader'}
????????]
????????})
},
??????{
????????test:?/\.jsx$/,
????????loader:?'babel-loader'
??????},
??????{
????????test:?/\.(gif|jpg|jpeg|png|svg)$/,
????????use:?[
??????????{
????????????loader:?'url-loader',
????????????options:{
??????????????limit:?1024,
??????????????name:?'[name].[ext]'
????????????}
??????????}
????????]
??????}
????]
},
??plugins:?[
new?webpack.DefinePlugin({

'process.env':?{
NODE_ENV:isDev?'"development"'?:'"production"'
}
}),
????//?請確保引入這個插件！
????new?VueLoaderPlugin(),
????new?HTMLPlugin(),
??]
}
if?(isDev)?{
//頁面調試工具?
config.devtool?=?'#cheap-module-eval-source-map'
//?開發環境端口
config.devServer?=?{
port:?8000,
????host:'0.0.0.0',
????historyApiFallback:true,
????overlay:?{
??????errors:true,
????},
//?熱加載，只渲染改變的組件，不需要重新渲染整個頁面
//?hot:?true不要和new?webpack.HotModuleReplacementPlugin()同時啟用
hot:?true
//?open:true
},
//?熱加載所需配置
config.plugins.push(
????//?new?webpack.HotModuleReplacementPlugin(),
????new?webpack.NoEmitOnErrorsPlugin()
??)
}
module.exports?=?config

123