webpack 知识点

• output.filename
  注意此选项被称为文件名，但是你还是可以使用像 "js/[name]/bundle.js" 这样的文件夹结构。
  注意，此选项不会影响那些「按需加载 chunk」的输出文件。对于这些文件，请使用 output.chunkFilename 选项来控制输出。

• output 中的属性：chunkFilename，决定了非入口 chunk 的名称。

    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

• output.path是webpack处理文件后输出的路径，对于CSS文件输出依然适用，即CSS文件也将输出至该目录；

• webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

• webpack多入口打包原理：
  entry配置成对象：

entry: {
    pageA: "./pageA",
    pageB: "./pageB"
}

如果entry的key有目录结构：

entry: {
    'pageA/js': "./pageA",
    'pageB/js': "./pageB"
 }

会输出到目录结构下。

• 要使用extract-text-webpack-plugin，必须要有 require('[name].css'); 语句（此插件处理的是用require引入的css）。

• webpack的entry是对象时====
  下面的配置会生成两个JS文件：indexEntry.js和profileEntry.js，你可以在index.html和profile.html分别使用它们：
  使用方法：

//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>

注意：文件名来自“entry”对象的key。

• html-webpack-plugin插件，参数chunks告诉插件要引用entry里面的哪几个入口。

chunks: ['app', 'vendors'],

• 安装指定版本使用 @ 符号
  举例：

npm install extract-text-webpack-plugin@2.1.2  --save