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].map
output.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
        }
    }
    ]
}