webpack相关的配置

当配置某类型文件的加载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>

webpack相关的配置

1、html-webpack-plugin

推荐阅读更多精彩内容