var path = require("path");
var webpack = require("webpack"); //启用热更新第二步
// 导入在内存中生成 html 的插件,只要是插件就一定要放在plugins中去
var htmlWebpackPlugin = require("html-webpack-plugin");
//通过node中的模块操作,向外暴露一个配置对象
module.exports = {
//entry: 表示要使用webpack打包的文件
entry: path.join(__dirname,"./src/main.js"),
output: { //输出文件相关的配置
path: path.join(__dirname,"./dist"), //指定打包好的文件,输出到那个文件中去
filename: "bundle.js" //指定输出文件的名称
},
devServer: { //这是配置dev命令参数的第二种方式,相对来说这种方式麻烦一些
//--open --port 3000 --contentBase src --hot
open: true, //自动打开浏览器
port: 3000, //设置启动的运行端口
contentBase: "src", //指定托管的根目录
hot: true //启用热更新第一步
},
plugins: [ //配置插件的节点
new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象,启用热更新第三步
new htmlWebpackPlugin({
template: path.join(__dirname,"./src/index.html"), //指定模板页面,将来会根据指定的页面路径去生成内存中的页面
filename: "index.html" //指定生成页面的名称
})
],
resolve: {
alias: { //修改vue被导入时候的包的路径
"vue$": "vue/dist/vue.js"
}
},
module: { //用于配置所有的 第三方模块 加载器
rules: [ //匹配规则
{test: /\.css$/, use: ["style-loader","css-loader"]}, //配置处理.css文件第三方loader规则
{test: /\.less$/, use: ["style-loader","css-loader","less-loader"]}, //配置处理.less文件第三方loader规则
{test: /\.scss$/, use: ["style-loader","css-loader","sass-loader"]}, //配置处理.scss文件第三方loader规则
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader"}, //配置处理图片路径第三方loader规则
//{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=2473&name=[hash:8]-[name].[ext]"}, //配置处理图片路径第三方loader规则
//limit的值是图片的大小,单位是dyte,但我们引用的图片大于或者等于给定的limit时,则不会被转为base64格式的字符串,
//如果小于limit,则会被转为base64格式的字符串
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"}, //配置字体文件第三方loader规则
{test: /\.js$/, use: "babel-loader", exclude: /node_modules/},//配置babel来转换高级的ES语法
{test: /\.vue$/, use: "vue-loader"} //处理.vue文件的loader
]
}
}
转载于:https://www.cnblogs.com/datiangou/p/10207936.html