如何使用webpack打包html+css+js+img+font?
工作中需要打包單個小項目帶着疑問去試試。
1.創建一個空文件夾，如下圖
2.使用命令行npm init -y 創建一個默認的package.json 如需修改可自己打開修改
3.webpack 打包要先安裝webpack 和webpack-cli 這里依然使用命令行進行安裝，推薦單項目安裝，可使用淘寶鏡像，具體如下圖
4.webpack打包構建的配置是在一個叫webpack.config.js文件中進行配置的，在根目錄下創建webpack.config.js文件。
5.緊接着我們就要去創建一些文件夾和文件，這里面是我們需要打包的代碼和靜態文件，結構如下。
6.其中js文件夾中的index.js 和footer.js中分別寫如下代碼
```
import staticImg from '../img/2x.png'
import staticImg2 from '../img/3x.png'
import Footer from './footer'
import '../css/style.css'
var imgTempl = '<img src="'+staticImg+'" />';
code: 你可以顯示代碼么？
</div>
document.body.innerHTML = imgTempl
new Footer()
```
```
function footer(){
console.log('引入成功')
}
export default footer
```
7.css文件夾就寫一些樣式，讓我們可以看出來css能成功引入並打包即可
8.font文件夾可以放字體文件以及svg圖片具體下載可以去iconfont去下載自己需要的使用或者測試
9.img文件夾中我放了兩個圖片一張大於10kb的一張小於10kb的，在打包配置圖片項可以設置小於多少才去打包（base64）.
10.最后來寫配置文件，這里我直接把寫好的貼上來，就不一個一個具體去寫了，如有疑問，可以在下方留言。
`cnpm i html-webpack-plugin extract-text-webpack-plugin bable-loader css-loader style-loader url-loader -D`
```
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
//入口文件可配置多入口
entry:'./src/js/index.js',
//出口文件
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name].js'
},
//打包模式 有development和production 之分
mode:'production',
module:{
//這里寫文件的配置規則 並且所使用的bable都需要安裝
rules:[{
test:/.jsx?/,
include:[
path.resolve(__dirname,'dist')
],
use:'bable-loader'
},
{
// 這里寫的css規則是沒有使用sass和less及stylus的，如果使用需要額外加想要的loader
test:/.css$/,
include:[
path.resolve(__dirname,'src')
],
//這里使用了css單獨打包插件也需要下載，不然css會打包到js中
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
},
{
test:/.(jpg|png|gif|jpeg)/,
//后面可以直接寫導出規則也可以單獨寫
use: [
{
loader: 'url-loader?limit=10240&name=images/[hash:8].[name].[ext]',
},
]
}
]
},
plugins:[
new ExtractTextPlugin('css/index.css'),
new HtmlWebpackPlugin(),
// new CleanWebpackPlugin()
]
}
```
11. package.json 里面要修改script 之后就可以執行npm run build 打包了
打包結果如下
可以看到css獨立出來了沒有被打包到js中去，img文件夾中有一個被base64到了js中 js文件夾中的footer.js已經被打入main.js , 並且使用插件自動生成了html文件。
12.最后在瀏覽器中打開看看效果
