当配置某类型文件的加载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'
当然最省事的就是指定webpack.config.js配置文件。
webpack 有一些命令，具体有：
--watch 可以监控文件的变化，实时进行打包，但是一般不建议这么做。
--progress 查看打包的进度
--display-modules 查看打包的模块都有哪些
--display-reason 模块打包进来的原因
--config 手动指定webpack打包要参考的配置文件
--colors 打印的信息颜色是彩色的，不指定的话，都是黑白色的，一般都是指定的，显示更友好一些
webpack的相关插件：
1、html-webpack-plugin
主要用于生成html文件的，不传参数的话，默认生成一个html，也可以传一个模板html，基于这个模板文件，生成一个html文件。主要的配置参数有：
//webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//....
plugins: [//一堆插件的数组
new htmlWebpackPlugin(),//默认生成一个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中进行引用，引用见下面的代码
minify: {, //生成的html文件进行压缩处理
removeComments: true, //删除注释
collapseWhitespace: true, //删除行内空格
}
}),
]
};
//对应的template.html文件，支持模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
<%= htmlWebpackPlugin.options.self-defination-feild %>
</body>
</html>
网友评论