webpack全配置

目录：

1）entry,output写法

      a.单页面

      b.多页面

2）htmlWebpackPlugin的用法（单页面，多页面）

     插件需要下载

3）webpack如何处理静态资源文件

      babel-loader

4）css-loader,style-loader,postcss-loader

      postcss-loader的配置是个坑

5）less-loader

6）项目中的模板文件

7）处理图片文件

     a.file-loader

     b.url-loader:设定limit,当小于这个limit的时候，会变成base64位的存储方式（可以减少http请求，缺点是代码量大）,大于这个limit的时候会交给file-loader处理

     c.image-webpack-loader：压缩图片，配合上面两个loader一起使用

范例：

var htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
var postcss =require('postcss');
var less = require('less');

module.exports = {
    entry:'./src/app.js',
    output:{
        path:__dirname+"/dist",
        filename:'js/[name].bundle.js'
    },
    module:{
        rules:[//rules -> 匹配规则
            {
                test:/\.js$/,
                exclude:'/node_modules/',
                include:'/src/',
                use:[
                    {
                        loader:'babel-loader',
                         query:{//指定参数
                            presets:['es2015']
                        }
                    }
                ]
                //include:path.resolve(__dirname,'src'),
                //exclude:path.resolve(__dirname,'node_modules'),
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',//css-loader用于解析，而style-loader则将解析后的样式以style的形式嵌入代码
                    {loader:'css-loader',options:{importLoaders:1}},
                    //importLoaders表示，如果在css中用了@imprt引入其他的css，如果还想用postcss-loader的私有前缀功能，就要用importLoaders属性，它的值为@import引入的次数，用了@import一次，其值就为1
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:function(){
                                return [
                                    require('postcss-import')(),//解决@import进来,一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
                                    require("autoprefixer")({browsers:['last 5 versions']})
                                ]
                            }
                        }
                    },
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',//css-loader用于解析，而style-loader则将解析后的样式以style的形式嵌入代码
                    'css-loader',//css,less混用的时候,css加上importLoaders，less可以不用加
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:function(){
                                return [
                                    require('postcss-import')(),//解决@import进来,一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
                                    require("autoprefixer")({browsers:['last 5 versions']})
                                ]
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            {
                test:/\.html$/,
                use:[
                    'html-loader'
                ]
            },
            {
                test:/\.(png|jpg|gif|svg)/i,
                use:[
                    {
                        loader:'url-loader',
                        query: {
                            limit:200000,
                            name:'assets/[name]-[hash:5].[ext]'
                        }
                    },
                    'image-webpack-loader'
                ]



            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            filname:'index.html',
            template:'index.html',
            inject:'body',
        })
    ]
}

//ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/