webpack 学习第二节课

constwebpackConfig= {
    // 生成 source map文件在webpack的配置文件中配置source maps，需要配置devtool;这为我们提供了一种对应编译文件和源文件的方法
    devtool:'eval-source-map',
    resolve: {
//自动扩展文件后缀名
    extensions: ['.js','.less','.png', '.jpg', '.gif'],
    'react-router-redux': path.resolve(nodeModules, 'react-router-redux-fixed/lib/index.js'),
},
    //参与编译的文件(告诉 webpack 解析模块时应该搜索的目录)
    modules: [
        'client',
        'node_modules',
    ],
},
    // 入口文件 让webpack用哪个文件作为项目的入口
    entry,
    // 出口 让webpack把处理完成的文件放在哪里
    output: {
    // 编译输出目录, 不能省略
        path:path.resolve(appPath,'public'),// 打包输出目录（必选项）
        filename:'[name].bundle.js',// 文件名称
        //资源上下文路径，可以设置为 cdn 路径，比如 publicPath: 'http://cdn.example.com/assets/[hash]/'
    publicPath:`${context}/`,
},
    devServer: {
        inline:true,
        compress:true,
        contentBase:path.resolve(appPath,'public'),
        disableHostCheck:true,
        hot:true,
        port:8666,
        publicPath:`${context}/`,
        historyApiFallback: {
            rewrites: [
        //多页面，则可以设置二级目录来区分
            {from:/^.*$/, to: `${context}/${moduleName}.html`}
            ]
        }
},
module: {
rules: [
// https://github.com/MoOx/eslint-loader
{
enforce:'pre',
test:/\.js$/,
exclude:/node_modules/,
use:'eslint-loader'
},
{
test:/\.js$/,
exclude:/node_modules/,
use:'babel-loader',
},
// https://github.com/webpack/url-loader
{
test:/\.(png|jpg|gif)$/,
use: {
loader:'url-loader',
options: {
name:'[hash].[ext]',
limit:10000,// 10kb
}
}
},
{
test:/\.(mp4|ogg|eot|woff|ttf|svg)$/,
use:'file-loader',
},
{
test:/\.css/,
use: ['style-loader', {
loader:'css-loader',
options: {
sourceMap:true,
modules:false,
localIdentName:'[name]__[local]__[hash:base64:5]'
}
}, {
loader:'postcss-loader',
options: {
pack:'cleaner',
sourceMap:true,
}
}],
},
{
test:/\.less/,
use: ['style-loader', {
loader:'css-loader',
options: {
sourceMap:true,
modules:false,
localIdentName:'[name]__[local]__[hash:base64:5]'
}
}, {
loader:'postcss-loader',
options: {
pack:'cleaner',
sourceMap:true,
}
}, {
loader:'less-loader',
options: {
outputStyle:'expanded',
}
}],
}
]
},
plugins
}