webpack 常用使用技巧

Loader Usage

• 三种方法

//方法1
require("./loader!./dir/file.txt");
require("jade!./template.jade");
require("!style!css!less!bootstrap/less/bootstrap.less");

//方法2
//在webpack.config.js 文件配置
{
    module:{
        loaders:[
            {test:/\.jade$/,loader:"jade"},
            {test:/\.css$/,loader:"style!css"},
            {test:/\.jade$/,loader:["style","css"]},
        ]
    }
}

//方法3
$ webpack --module-bind jade --module-bind 'css=style!css'

常见Loaders介绍

• 样式 css-loader sass-loader less-loader
• 脚本 babel-loader
• 图片/字体 file-loader url-loader

webpack常用的优化

• 使用别名

{
    resolve:{
        alias:{
            moment:"moment/min/moment-with-localies.min.js"
        }
    }
}

require("moment")

• 忽略对已知模块的解析

{
    module:{
        noParse:[/moment-with-locales/]
    }
}

• 将模块暴露到全局

方法1;使用expose-loader

{
    module:{
        loader:[{
            test:/jquery\.js$/,
            loader:"expose?$!expose?jQuery"
            //这句话expose问号后面跟一个参数$ 然后! 是并行;然后在把jQuery导出去
        }]
    }
}
require("expose?$!expose?jQuery!jquery");

方法2 ; 使用ProvidePlugin

{
    plugins:[
        new webpack.ProvidePlugin({
            $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        })
    ]
}
//$("#a")

• 提取公共代码

{
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendor",
            filename:"[name].[hash:8].js",
            minChunks:3,
            chunks:['jquery','underscore']
        })
    ]
}

• 配置全局开关

{
    plugins:[
        new webpack.DefinePlugin({
            DEGUG:true
        })
    ]
}
//constant.js
const Constant={
    API_HOST:DEGUG?"www.baidu.com":""
}

• 单独打包css 不打包成js文件

{
    plugins:{
        new ExtractTextPlugin("[name].[hash:8].css",{
            allChunks:true
        })
    }
}