上一片博文主要让大家了解下究竟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随便写一个就行 }) ] }