base on webpack@4.x
配置文件webpack.config.js
在项目文件根目录下创建webpack.config.js;
module.export={
entry: string|Array //注意单入口和多入口文件；
output:{path,filename}//__dirname 意为根目录；
mode:'production|development' //声明开发模式；
module:{ rules:[{
test:/reg/ //匹配规则 ，use:['xxx-loader','xxx-loader'] //注意loader之间的依赖关系
}]}，
plugins:[] //使用的插件，解决loader无法实现的其他事。
}
使用html-webpack-plugin
安装 npm i html-webpack-plugin -D；
使用 var HtmlWebpackPlugin=require('html-webpack-plugin');
plugins:[new HtmlWebpackPlugin(
template:'',//模板文件的路径
filename: 'index.html',//指定生成的html文件名
minify: {collapseWhitespace: true},//压缩文件中的空格等
hash:true//t为了更好的 cache，可以在文件名后加个 hash。
)]
处理css文件及ExtractTextWebpackPlugin的使用
安装：cnpm i style-loader css-loader -D
使用：module:{rules:[{
test:/\.css$/ //匹配文件，use:['style-loader','css-loader]// style-loader在前
}]}
ExtractTextWebpackPlugin
plugins:[new ExtractTextWebpackPlugin()],
module:{rules:[{
test:/\.css$/ //匹配文件，
use:ExtractTextWebpackPlugin.extract({
fallback:'style-loader', use:['css-loader']
})
}]}
webpack-dev-server
安装：cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D
devServer: {
port: 9000, //自定义端口
open: true //是否自动打开浏览器
},
