Webpack4

引入Webpack管理工具的原因

项目打包上线的时候，需要我们将ES6语法转化成ES5语法，scss语法转化成浏览器能识别的css文件，jQuery语法转化成为js文件，vue文件转化成js文件，将各种开发环境的文件压缩成压缩文件，提高项目运行速度。模块化使我们将复杂的项目细化为小的文件。webpack好处，当css语法前有为了兼容的前缀你记不住，webpack打包上线的时候会自动帮你添加前缀。

安装Webpack

建议项目安装，由于webpack不断更新所以安装到全局会影响新版本的安装失败。给项目造成不必要的困惑。
步骤如下：

1.安装node，全局安装即可
2.进入项目
3.npm init生成package.json文件
4.npm install webpack webpack-cli --save dev（使用4以上版本才装cli）
5.如果是mac版本，应该在命令前面添加sudo
6.webpack -v
7.安装完成之后，很多需要的包会在node_modules包管理工具中，此时再用webpack -v查看webpack版本号就不好使了，因为此时webpack在项目中的node_modules文件夹中。全局查看版本找不到。

建立webpack.config.js文件

有关webpack配置的文件都需要在这里面填写
const path=require("path");
module.exports={
    mode:'production',//生产环境下
    mode:'development',//开发环境下
    entry:{//入口配置文件
        XX:'./src/index.js'
    },
    output:{//出口配置文件
        path:path.resolve(__dirname,'./dist')
        //path下有很多方法
        filename:'[name].js'//文件的名字
    }
    module:{}//模块解读css，图片如何压缩
    plugins：[],//插件用于生产模板和各项功能
    devSever:{}//配置webpack开发服务功能
    
}

在package.json文件下配置我们的命令

"scripts":{
    'build':'webpack',
}
运行命令的时候，写的是build就是npm run build

创建webpack热服务

1.安装webpack-dev-server，安装完成之后在package.json中找到devDependencies查看是否有webpack-dev-server的版本号。
2.在webpack.config.js文件中配置
//配置webpack开发服务功能
devServer:{
    contentBase:path.resolve(__dirname,'./dist'),
    //设置基本目录结构
    host:'127.0.0.1',
    //服务器的IP地址，也可以写localhost
    port:8081,
    compress:true//服务器压缩是否开启
    open:true//自动打开页面
    hot:true
    //实时局部刷新
}
3.packjson文件中配置
"scripts":{
    'build':'webpack',
    'dev':'webpack-dev-server'
}
4.创建热更新最后要引入插件
在webpack.config.js文件中配置
plugins[
    new webpack.HotModuleReplacementPlugin()
]

HTML打包

1.安装插件
npm install html-webpack-plugin --save dev
npm安装完成之后相当于被安装到了node_modules中，所以在使用时，应当将其引入到webpack.config.js文件中
const HtmlWebpackPlugin=require("html-webpack-plugin");
plugins[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HtmlWebpackPlugin({
        minify:{
            removeAttributeQuotes:true
            //去掉属性的双引号
            collapseWhitespace: true
            //折叠空白区域
        },
        hash:true,
        //为了js中有缓存效果
        template:'./src/index.html'
        //要打包的html模板和路径名称
    })
]

多页面应用打包

SPA单页面应用

当每个html文件对应不同的js文件的时候，可以在webpack.config.js文件中，配置new webpack.HtmlWebpackPlugin中添加
{
    filename:'b.html'
    chunks：['index']
    //对应的js文件名称
    title:'index-title'
    //修改html文件的title
}

CSS打包

1.在入口js文件中 import css from './css/index.css'
2.下载插件：
style-loader:用来处理css文件中的url，将url挂载到js文件中
css-loader:用来将css插入到页面的style标签中
npm install --save-dev style-loader
npm install --save-dev css-loader
3.在webpack.config.js文件中配置
module:{
    rules:[
        {
            test:/\.css$/,
           //过滤文件以.css结尾的文件 use:['style-loader','css-loader']
            //利用style-loader和css-loader来解析文件
        }
    ]
}

CSS文件打包时和js文件分离

有时我们不希望打包后的文件js和css在一个文件里，所以将其分离

1.引用插件 
在webpack.config.js文件中引入
const ExtractTextPlugin=require("extract-text-webpack-plugin")
2.安装 npm install --save-dev extract-text-webpack-plugin@next
以最新版本安装
3.配置
module:{
    rules:[
        {
            test:/\.css$/,
           //过滤文件以.css结尾的文件 use:ExtractTextPlugin.extract({
               fallback:'style-loader',
               use:'css-loader'
           })
            //利用style-loader和css-loader来解析文件
        }
    ]
}
plugins[
    new ExtractTextPlugin("css/index.css")
]
css文件会自动关联html中

将CSS中的图片打包

1.安装npm install --save-dev file-loader url-loader
2.配置
module:{
    rules:[
    {
        test:/\.css$/,
       //过滤文件以.css结尾的文件 use:['style-loader','css-loader']
        //利用style-loader和css-loader来解析文件
    },
        {
        test：/\.(png|jpg|gif)/,
        // test:/\.(png|jpg|gif)/ 是匹配文件的后缀
        use:[{
                loader:'url-loader',
                //指定loader的配置参数
                options:{
                    limit:500,
                    outputPath：'images/'
                }
            }]
        }
    ]
}

html中的图片打包

https://github.com/wzsxyz/html-withimg-loader
module:{
    rules:[
        {
        test:/\.(htm|html)$/i
        loader:'html-withimg-loader'
        }
    ]
}