const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');//程式碼壓縮外掛
const htmlPlugin = require('html-webpack-plugin');//html 打包工具
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');//css 分離工具
const webPath = {
    publicPath: "http://192.168.1.105:8080/"//配置檔案的路徑
};
const 
 
webpack = require('webpack');

const config = {
    mode: 'development',//production
entry: {//入口
search:'./src/search.js'
},
    output: {//出口
path: path.resolve(__dirname,'dist'),//出口的目錄
filename: '[name].js',//
publicPath: webPath.publicPath
},
    module: {//css //圖片 //圖片壓縮
rules: [//規則
{
                test:/\.css$/
 
,//正則匹配
use: extractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
})
                //loader:['style-loader','css-loader'],第一種寫法
                //use:['style-loader','css-loader'],//使用的元件  第二種寫法
                /*use:[{//第三種寫法（常用）
                 loader:'style-loader'
 
                },{
                    loader:'css-loader'
                }]*/
                //include:'',//那些檔案不需要處理
                //exclude:'',//那些檔案需要處理
                //query:"" 可選的額外配置項
},
            {
                test:/\.(gif|png|jpg|woff|svg|ttf|eot)$/,//圖片的處理
use:[{
                    loader:'url-loader',
                    options: {
                        limit:500,//當圖片小於這個值他會生成一個圖片的url 如果是一個大於的他會生成一個base64的圖片在js裡展示
outputPath: 'img/',// 指定打包後的圖片位置
name:'[name].[ext]?[hash]',//name:'[path][name].[ext]
                        //publicPath:output,
}
                }, /*{
                    loader: 'file-loader',
                    options: {
                        limit:50,
                        name: '[name].[ext]?[hash]',
                        outputPath: 'img/',
                    }
                }*/]
            }
        ]
    },
    plugins: [//外掛
       // new uglify(),使用壓縮元件(實驗發現，生產環境不需要此外掛也可以壓縮)
new htmlPlugin({
            minify:{
                removeAttributeQuotes:true,//去掉屬性值後的雙引號
},
            hash:true,//去除快取
template:'./src/index.html'//模板檔案
}),
        //new webpack.HotModuleReplacementPlugin(),
new extractTextWebpackPlugin('./css/index.css')
    ],
    devServer: {//服務配置
contentBase:path.resolve(__dirname,'dist'),//根路徑
host:'192.168.1.105',//域名
compress: true,//開啟伺服器壓縮
port:'8080',//埠號
}

};

module.exports = config;

Webpack 圖片
Npm install file-loader url-loader –save-dev 安裝圖片的依賴包
9、
css 分離
依賴外掛
npm install extract-text-webpack-plugin –save-dev // webpack4 不能用
請用 npm install [email protected] --save-dev
注意 url-loader 和 url-loader 使用一個就好url-loader 依賴於file-loader是對file-loader又封裝了一層。url-loader的配置都可以使用
url-loader
{
limit //設定大小限制大於他就用檔案形式，小於就壓縮成base64為
mimetype: 'image/png‘設定檔案的MIME型別。如果未指定，則將使用副檔名來查詢MIME型別。
fallback: 'responsive-loader' //表示超過limit設定的上線 就用 這個程式處理
}