开发环境webpack基础配置

webpack文档内容特别多，这里整理出我平常用的webpack4.0基本的配置，给新手们参考

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')

const config = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
publicPath: 'public', /* html引入的js文件的路径前缀，开发环境一般不填*/
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'cheap-module-eval-source-map',  /*
开发环境一般用这个，打包后的一个js文件，
映射到你打包之前的js文件，可以知道你的报错位置和报错信息
*/
devServer: {
contentBase: 'dist', /* 本地服务器开启的路径，写你打包生成的路径 */
open: true, /* 打包后自动打开浏览器 */
port: 8080,
hot: true,  /*
热更新，需要在plugin中加入new webpack.HotModuleReplacementPlugin()
js文件开启热更新需要加入以下代码：
if(module.hot){
module.hot.accept('./index.js', function() {})
}
第一个参数填你需要监听的文件路径, 第二个参数文件发生改变后执行的回调函数
*/
hotOnly: false /* 是否自动刷新浏览器 */
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader', /* 安装babel-loader @babel/core @babel/preset-env */
options: {
presets: [
['@babel/preset-env', {
useBuildInts: 'usage'  /* 使用这个配置项需要安装@bable/polyfill */
}]
]
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoader: 1 /* css-loader后面还有一个postcss-loader 所以填1 */
}
},
'postcss-loader'  /*
可以给你的css3新属性增加厂商前缀 -webkit- 。。。
需要安装autoprefixer并且新建一个postcss.config.js内容为：
module.exports = {
plugin: [require('autoprefixer)]
}
*/
]
},
{
test: /\.(png|jpg|gif|jpeg|woff|svg|eot|ttf|woff2|otf)$/,
use: {
loader: 'url-loader',
options: {
outputPath: 'file/',
name: '[name].[hash].[ext]',
limit: 10240 /* 文件小于10k就生成base64 */
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new cleanWebpackPlugin(['dist']) /* dist：打包在哪个目录就写哪个目录，用来清除之前打包的内容 */
]
}

module.exports = config