當(dāng)配置某類型文件的加載loader時比驻,在沒有webpack.config.js文件時该溯,可以在import的地方指定:
import 'style-loader!css-loader!style.css'
也可以在命令行中通過module-bind配置指定:
webpack index.js index.buldle.js --module-bind 'css=style-loader!css-loader'
當(dāng)然最省事的就是指定webpack.config.js配置文件。
webpack 有一些命令别惦,具體有:
--watch 可以監(jiān)控文件的變化狈茉,實時進(jìn)行打包,但是一般不建議這么做掸掸。
--progress 查看打包的進(jìn)度
--display-modules 查看打包的模塊都有哪些
--display-reason 模塊打包進(jìn)來的原因
--config 手動指定webpack打包要參考的配置文件
--colors 打印的信息顏色是彩色的氯庆,不指定的話,都是黑白色的扰付,一般都是指定的堤撵,顯示更友好一些
webpack的相關(guān)插件:
1、html-webpack-plugin
主要用于生成html文件的羽莺,不傳參數(shù)的話实昨,默認(rèn)生成一個html,也可以傳一個模板html禽翼,基于這個模板文件屠橄,生成一個html文件族跛。主要的配置參數(shù)有:
//webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//....
plugins: [//一堆插件的數(shù)組
new htmlWebpackPlugin(),//默認(rèn)生成一個index.html文件
new htmlWebpackPlugin({
template: 'template.html', //模板文件
filename: 'index.html', //生成的文件名稱
inject: 'head', //打包后的js注入位置:head body true false
title: '首頁', //修改html文件中的title字段
chunks: ['index'], //多個入口時闰挡,指定該html要引入的js是哪些
self-defination-feild: 'xxxx', //自定義的一些字段,在html中進(jìn)行引用礁哄,引用見下面的代碼
minify: {, //生成的html文件進(jìn)行壓縮處理
removeComments: true, //刪除注釋
collapseWhitespace: true, //刪除行內(nèi)空格
}
}),
]
};
//對應(yīng)的template.html文件长酗,支持模板語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
<%= htmlWebpackPlugin.options.self-defination-feild %>
</body>
</html>