webpack进阶--打包

上一片博文主要让大家了解下究竟webpack是干什么的，明显它是专注于打包的。

---

gulp  和  webpack  的区别

gulp，要求我们一步步写task（es6编译、css压缩、图片压缩、打包...），全过程都是我们掌控的（一开始项目小的时候，我们觉得灵活，但是后来项目复杂度上来了，我们觉得这样写task也太恶心了）。

webpack，只要写好配置文件，就会帮我们处理好各种零散的html、css、js（这里包括它们的预编译语言例如jade、sass、es6、typescript等）,然后打包成一个js文件。

gulp和webpack最明显的区别就是webpack自动化程度更高，不用自己写各种各样的稀奇古怪的task。

---

使用：

1.安装

webpack和gulp一样都要先全局安装一次，再在项目安装一次：

npm i webpack -g
npm i webpack -D

ps:全局安装是为了能获取本地模块

2.配置文件

默认配置文件名：webpack.config.js

如果想用其他名字例如：1.config 调用webpack时请用 webpack --config 1.config

//webpack.config.js
const path = require('path');
//一个入口对一个最终打包的js
//单入口写法
module.exports = {
    entry: './src/script/main.js',
    output: {
        path: path.solve('./dist'),
        filename: 'bundle.js'
    }
}
-----------------------------------------------------------------------------------------------------
//多个平行依赖入口写法，最终会打包在一起
module.exports = {
    entry: ['./src/script/main.js','./src/script/main2.js','./src/script/main3.js'],
    output: {
        path: path.solve('./dist'),
        filename: 'js/bundle.js'
    }
}
-----------------------------------------------------------------------------------------------------
//多入口写法，最终会打包多个文件
//[name] 这里是page1 page2
//[hash] 这个每次打包生成的一个hash（签名）值
//[chunkhash] 这个是每个打包文件的md5 hash
module.exports = {
    entry: {
        page1 :'./src/script/main.js',
        page2 :'./src/script/main2.js'
    },
    output: {
        path: path.solve('./dist'),
        filename: 'js/[name]-[chunkhash].js'
    }
}

3.生成index.html(自动插入打包好的js文件)

之前的文件都不能自动将打包文件放入index.html中,所以我们要借助新的插件html-webpack-plugin(需安装)

//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        a:'./src/script/main.js',
        b:'./src/script/main2.js'
    },
    output: {
        path: path.solve('./dist'),
        filename: 'js/bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template: 'index.html', //以当前目录下的index.html为模板
            filename: 'index-[hash].html',
            inject: 'head',//默认时body
            hahaha: '自定义属性的自定义内容' ,//这个内容可以在模板上用ejs语法调用，例如<%=htmlWebpackPlugin.options.hahaha%>
            minify: { //压缩html
                removeCommet: true, //去注释
                collapseWhitespace: true //去空格
            },
            chunks:[a], //要入口js a
            excludeChunks:[b] //不要入口js b chunks和excludeChunks随便写一个就行
        })
    ]
}