摘要：書接上文，繼續(xù)干，配置一些常用的插件使支持壓縮插件默認(rèn)已經(jīng)有，所以只需要引入就可以使用在中配置生成將的目錄下面的移入目錄，并且刪除以及的引入標(biāo)簽，然后安裝包。在中添加后續(xù)抽空補上打包以及第三方插件的的配置。。。。。。

書接上文，繼續(xù)干，配置一些常用的插件使支持

uglifyjs js壓縮插件
webpack默認(rèn)已經(jīng)有uglifyjs，所以只需要引入就可以使用.
在webpack.config.js中配置:

const path=require("path");
const webpackDevServer=require("webpack-dev-server");
const extractTextWebpackPlugin=require("extract-text-webpack-plugin");
const uglify=require("uglifyjs-webpack-plugin");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",
                    use: ["css-loader",]
                })
            }
        ]
    },
    plugins:[
        new extractTextWebpackPlugin({
            filename:"index.css"
        }),
        new uglify()
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

2.html-webpack-plugin 生成html

將dist的目錄下面的index.html移入src目錄，并且刪除script 以及css 的引入標(biāo)簽，然    

后安裝html-webpack-plugin包。

cnpm install --save-dev html-webpack-plugin

在webpack.config.js中修改如下

const path=require("path");
const webpackDevServer=require("webpack-dev-server");
const extractTextWebpackPlugin=require("extract-text-webpack-plugin");
const uglify=require("uglifyjs-webpack-plugin");
const htmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",
                    use: ["css-loader",]
                })
            }
        ]
    },
    plugins:[
        new extractTextWebpackPlugin({
            filename:"index.css"
        }),
        new uglify(),
        new htmlWebpackPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:path.join(__dirname,"./src/index.html")
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

file-loader、url-loader html-withimg-loader圖片處理以及打包
在src下面建一個images的文件夾放入一張圖片
分別在css和html 的img標(biāo)簽中引入

cnpm install --save-dev file-loader url-loader

cnpm install --save html-withimg-loader

webpack.config.js修改如下：

const path=require("path");
const webpackDevServer=require("webpack-dev-server");
const extractTextWebpackPlugin=require("extract-text-webpack-plugin");
const uglify=require("uglifyjs-webpack-plugin");
const htmlWebpackPlugin=require("html-webpack-plugin");
const webset={
    publicPath:"192.168.0.175:8888/"
}
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",
                    use: ["css-loader",]
                })
            },
            {
                test:/.(png|jpg|gif)$/,
                use:[{
                    loader:"url-loader",
                    options:{
                        limit:8192,
                        outputPath:"images/"
                    }
                }]
            },
            {
                test:/.(htm|html)$/i,
                use:["html-withimg-loader"]
            }
        ]
    },
    plugins:[
        new extractTextWebpackPlugin({
            filename:"index.css"
        }),
        new uglify(),
        new htmlWebpackPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:path.join(__dirname,"./src/index.html")
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

4.配置babel(很關(guān)鍵，可以讓瀏覽器支持es6語法。)

cnpm install babel-loader babel-core babel-preset-env

在webpack.config.js中添加loader:

后續(xù)抽空補上打包jquery以及第三方插件的webpack的配置。。。。。。