webpack---webpack.config.js配置基本要素entry、output、loader、plugins等

1、entry入口

webpack.config.js

module.exports={    entry:'./src/index.js'  //index.js即为webpack编译入口文件};//也可以这么写module.exports={    entry:{        app:'./src/index.js',        home:'./src/home.js'    }}

2、output输出

webpack.config.js

module.exports={    entry:'./src/index.js',    output:{        filename:'bundle.js',        path:'/build'    }};     //output配置中filename为编译文件的输出名字，path为编译文件的输出路径（绝对路径）,这两项是output配置的必填项////////其他配置选项：output.sourceMapFilename;//map文件名，如[file].mapoutput.hotUpdateFunction,output.hotUpdateChunkFilename等

3、loaders加载器

      loader是webpack对项目中的css、ES6等资源文件进行转换的工具，他们运行于node.js，将文件转换为新的解析文件。
如：将sass文件转换为可执行的css文件，首先安装依赖css-loader 、sass-loader、extract-text-webpack-plugin；

cnpm install --save css-loader;cnpm install --save sass-loader;cnpm install --save extract-text-webpack-plugin;

webpack.config.js:

const path=require('path');//路径插件const ExtTxtPun=require('extract-text-webpack-plugin');//导出独立css文件module.exports={    entry:'./src/index.js',    output:{        path:path.join(__dirname,'build'),        filename:'[name].js'    },    module:{        rules:[            {                test:/\.scss$/,                loader:ExtTxtPun.extract('css-loader!sass-loader')            }        ]    },    plugins:[        new ExtTxtPun('[name].css')    ]}

index.js

import './a.scss';

a.scss

body{background:#000}

运行webpack命令，得到结果：
bundle目录下：main.js和main.css

4、plugins插件

webpack的插件也是一个js对象，在webpack.config.js中，plugin的使用必须new一下。

plugins:[    new ExtractTextPlugin('[name].css')//导出独立的css文件]

5、module

module:{    rules:[        {        test:/\.scss$/,        use:["style-loader","css-loader","sass-loader"]    },{        test:/\.jsx$/,        loader:'babel-loader',        options:{            modules:true        }    }    ]}