webpack⼊门之打包html,css,js,img（⼀）
webpack到底是什么，⽹上⼀⼤堆介绍的东西，越看越不知道说的什么，所以今天打算⾃⼰来记录⼀下这段时间学习webpack的成果，
webpack就是打包⽂件⽤的，html，css，js,img，为什么通过他打包？说⽩了就是我们可以提前使⽤新的东西，es6现在浏览器⽀持的其实并不是很好，但这不是问题，你可以采⽤es6去写脚本，手机上可以打html与css的app
然后通过webpack去打包成es5，vue项⽬⾥⾯的vue⽂件也是⼀样的，也是需要webpack打包成浏览器能够识别的⽂件才能正常使⽤，废话不多说，咱们搞起
个磁盘，新建⼀个demo⽂件，cmd进去（⾸先要安装 Node.js， Node.js ⾃带了软件包管理器 npm），
依次执⾏，
npm init -y,⽣成package.json⽂件
npm install webpack -g  全局安装webpack
npm install webpack --save-dev  项⽬中安装
成功以后构建如下的⽂件建构，（bootstrap,jquery,layer，可暂时不建）
index.html
index.js
1.打包html，js(⼤部分webpack教程都是ports和import开始，我觉得需要⽤到的时候再说最好)
我们先看如何来打包html，和js
打包html需要使⽤插件
npm install html-webpack-plugin --save-dev
以上搞定后，开始配置fig.js
代码如下，看不懂先不要紧张，先跑起来再说
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
entry:{
'app/dist/js/index':'./app/src/js/index.js'  //⼊⼝⽂件
//我们的是多页⾯项⽬，多页⾯⼊⼝配置就是这样，
//app/src/page下可能还会有很多页⾯，照着这样配置就⾏
},
output:{
//__dirname 当前fig.js的路径
filename: '[name].js',      //打包后index.js的名字，
// 这个[name]的意思是，配置⼊⼝entry键值对⾥的key值,app/dist/js/index，最后的index，
//这⾥⽆论你src/js/index.js这个脚本如何命名，打包后都将是index.js //  path: solve(__dirname)
},
//插件
plugins:[
new HtmlWebpackPlugin({
chunks:['app/dist/js/index'],
filename:'app/index.html',
template:'app/src/page/index.html'
})
]
}
cmd进⼊demo⽂件
输⼊webpack -p  （编译）
成功后是这样的
最后转过头来看我们的demo⽂件，看看⾥⾯有什么变化
打包过后在app⽂件下⾯⽣成了⼀个index.htm和⼀个dist⽂件
打包出来的index.html
打包出来的index.js
打开app/index.html
这样就成功了哈
观察发现，打包过后的index.html⾃动引⼊了打包过后的index.js，打包之前我们也⽆需在app/src/page/index.html下引⼊对应脚本，⼀切交给webpack！(后⾯的打包css也会是如此,)
打包后index.js也是压缩过的，美滋滋
结尾
我们编写js，css，html是在src下⾯的⽂件进⾏编写的，⽣产环境，发布版本我们只会发布dist⾥⾯的
东西，
⽬前dist⽂件⾥只打包出js⽂件，后续会打包出 css，甚⾄是img

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。