HTML + CSS + JS + IMG +フォントWebPACKのパッケージを使用するには？

    工作中需要打包单个小项目带着疑问去试试。

1.以下に示すように、空のフォルダを作成します。

2.変更するには、デフォルトのinit -y package.jsonを作成するには、コマンドラインを使用してNPM独自のオープンを変更

3.webpackパッケージは、まず、具体的として、それは単一のプロジェクトをインストールすることをお勧めします、あなたが淘宝網のミラーを使用することができ、インストール用のコマンドラインを使用してまだここのWebPACKとWebPACKの-CLIをインストールする必要があります。

4.webpackパッケージのビルド構成は、ルートディレクトリにwebpack.config.jsファイルを作成し、webpack.config.jsというファイルに設定されています。

5.その後、我々はいくつかのフォルダやファイルを作成しようとしている、次のように構成され、当社のコードと静的ファイルをパッケージ化する必要があります。

```

「../img/2x.png」からインポートstaticImg
「../img/3x.png」からインポートstaticImg2
「./footer」から輸入フッターを
インポート」../css/style.css'

imgTempl = VARの'<img src="'+staticImg+'" />';
コード：あなたがコードにそれを表示することができますか？
</ div>
document.body.innerHTML = imgTempl

新しいフッター（）
`` `

```
function footer(){
console.log('引入成功')

}

輸出デフォルトのフッター

```

私たちは、CSSが正常に導入され、パッケージに見ることができるように、いくつかのスタイルを記述する7.cssフォルダ

自分たちのニーズをダウンロードしたり、テストするためにiconfontする8.fontフォルダは、特定のフォントファイルを置くことができますし、SVG画像をダウンロードすることができます

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文件。