webpack

靜態模塊打包器
安裝  npm install webpack --save-dev   開發依賴  

webpack.config.js

let path=require("path");
let HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
    entry:"./src/main.js",
    output:{
        filename:"build.js",
        path:path.resolve("./dist"),
    },
    module:{
        //編譯處理  js,css,less,圖片 ,vue
        rules:[
            //test :匹配編譯文件的
            //use :[]使用的什麼模塊來編譯(你在node_modules安裝的一些編譯的包),注意編譯是有順序,從右到左的順序
            //exclude :過濾掉.排除掉
            {test:/\.js$/,use:["babel-loader"],exclude:/node_modules/},
            {test:/\.css$/,use:["style-loader","css-loader"]},
            {test:/\.less$/,use:["style-loader","css-loader","less-loader"]},
            ///默認將圖片處理爲base64 我們可以限制一下,圖片小的時候轉,太大就不用轉了
            //大小限制在 5kb(5*1024字節)一下
            {test:/\.(jpg|png|gif|jpeg)/i,use:["url-loader?limit=5120"]}
        ]
    },
    plugins:[
        //html-webpack-plugin 導出了一個類 HtmlWebpackPlugin,方法都在原型上,需要new一個實例來使用
        new HtmlWebpackPlugin({
            // filename:"main.html",
            // 不寫filename 默認在dist文件下生成一個index.html(上線使用的)
            template:"./src/index.html",//原來的html(開發使用的html)
        })
    ]
};