webpack、webpack.config的配置详细说明

第一步骤：webpack概念

 1、入口起点（entry）

用法：entry: string|Array<string>

webpack.config.js

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

入口起点说明：http://www.css88.com/doc/webpack/concepts/entry-points/

2、输出（output）

用法：在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

• filename 用于输出文件的文件名。
• 目标输出目录 path 的绝对路径。

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

多个入口起点输出

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

path：用来存放打包后文件的输出目录 
publicPath：指定资源文件引用的目录 

用处：例如在express中，指定了public/dist是网站的根目录，网站的源文件存放在public中，那么就需要设置path:”./dist”指定打包输出到该目录，而publicPath就需要设置为”/”,表示当前路径。 
publicPath取决于你的网站根目录的位置，因为打包的文件都在网站根目录了，这些文件的引用都是基于该目录的。假设网站根目录为public，引用的图片路径是’./img.png’，如果publicPath为’/’，图片显示不了，因为图片都打包放在了dist中，那么你就要把publicPath设置为”/dist”。

输出说明;http://www.css88.com/doc/webpack/concepts/output/

3、加载器(loader)

在你的应用程序中，有三种使用 loader 的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。

modules配置选项功能描述

   test                    一个匹配loaders所处理的文件的拓展名的正则表达式(必须)

   loader               loader的名称(必须)

   include/exclude  手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件(文件夹)(可选)

   query               为loaders提供额外的设置选项(可选)

module: {  
        loaders: [  
            {  
                test: /\.json$/,  
                loader: "json-loader"  
            },  
            {  
                test: /\.js$/,  
                exclude: /node_modules/,  
                loader: 'babel',  
                query: {  
                    presets: ['es2015','react']  
                }  
            }  
        ]  
    },  

了解更多loader的说明：http://www.cnblogs.com/chenguiya/p/8392697.html 

4、插件（plugins）

   用法：由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

插件说明：http://www.css88.com/doc/webpack/plugins/

 说明：https://www.likecs.com/show-307074490.html#sc=1414