webpack相关配置

webpack相关配置

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
        ]
    }
}