webpack4 化繁爲簡（二）

書接上文，繼續幹，配置一些經常使用的插件使支持

1. uglifyjs js壓縮插件
   webpack默認已經有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 的引入標籤，然

後安裝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
    }
}

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

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(很關鍵，可讓瀏覽器支持es6語法。)

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

在webpack.config.js中添加loader:

後續抽空補上打包jquery以及第三方插件的webpack的配置。。。。。。