const webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
build: path.resolve(__dirname, 'src/main.js')
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.js$/,
exclude: /\.node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015']
}
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({//把編譯后的代碼插入html姆另，html是手動加的，自動生成失敗了
filename:'index.html',
template: path.resolve(__dirname, 'index.html')
})
],
devtool: 'cheap-module-source-map',//顯示第幾行錯誤蝶防，如果有錯的話
devServer: { //熱加載
clientLogLevel: 'none',
hot: true,
port: 3000,
contentBase: "./",
open: false,
lazy: false
}
}
1.webpack dev server 如果要局部刷新，除了基本的設(shè)置還需要在代碼入口處加上下面一行：
if (module.hot) { module.hot.accept(); }
-p 相當(dāng)于--optimize-minimize --define process.env.NODE_ENV="'production'"
--progress 控制臺顯示進(jìn)度
--color 控制臺顯示顏色
--config 修改默認(rèn)執(zhí)行的webpack.config.js的行為间学，可以按照指定的文件 執(zhí)行
啟動命令: webpack-dev-server --progress --watch --config config/webpack.dev.js
上面已經(jīng)廢棄，完整版配置看這里https://github.com/ShiChenCong/react-ts-webpack
