webpack 使用遇到的问题

第一次发博客   知识有限   如果有错误希望大家能够指出 谢谢

1. 使用webpack 要安装上包 ：  

要全局安装 cnpm i webapck webapck-cli -D 局部  -g 全局

2.如果抛出黄色异常说你的mode 就说明你的 配置坏境没有建好

 

 :就在自己建一个webpack.config.js 在里面添加 环境 mode:developmant  这个是开发环境 可能大家的使用环境 不一样要注意

 

 

3. 自己配置的一个简单 webpack.config.js

//由于 webpack 是基于 Node 进行构建的 所有 webpack 的配置文件中 任何合法的Node 代码都是支持的

var path=require('path')

// 在内存中，根据指定的模板页面 生成一份内存中的首页，同时自动打包好的 bundle 注入到页面里面

// 如果要配置插件 需要在一个 plugins 中的节点进行配置

var htmlWebpackPlugin=require('html-webpack-plugin')

// 导入VueLoaderPlugin

var VueLoaderPlugin = require('vue-loader/lib/plugin');

// 当以命令行形式或运行 webpack 或 webpack-dev-server 的时候 工具发现我们没有提供要打包的文件

//的入口 和 出口 就会去配置文件 读取这个文件 就拿到了这个 配置对象 进行打包构建

module.exports={

    entry:'./src/main.js', //入口文件

    output:{//指定输出选项

        path:path.join(__dirname,'./dist'),//输出路径

        filename:'bundle.js'//指定输出名称

    },

    mode:'development',//设置环境

    plugins:[//所有webpack插件的配置节点

        new htmlWebpackPlugin({

            template:path.join(__dirname,'./src/index.html'),//指定模板文件路径

            filename:'index.html'//设置生成的内存页面名称

        }),

        new VueLoaderPlugin()

    ],

    module:{//配置所有第三方loader  模块 

        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|bmp)$/, use:'url-loader?limit=705,920&name=[name].[ext]'},

             //处理图片路径的loader  limit 给定的值 是图片的大小 单位是 byte 如果我们引用的图片 大于或等于给定的值就 

             //不会被转为base 64 格式的字符串如果 图片小于给的 limit 值就会转换为 base 64 的字符串

             {test:/\.(ttf|eot|svg|woff2)$/,use:'url-loader'},

             //处理字体文件配置 loader

             {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},

             //这是配置 Babel 来转换 ES 的高级语法

             {test:/\.vue$/,use:'vue-loader'}

             // 处理 .vue 文件的

        ]

    },

    

    resolve:{//修改vue导包路径

        alias:{//这是修改 Vue导入包的路径

            // "vue$":'vue/dist/vue.js'

        }

    }