Learning Webpack

Webpack基础

Webpack特性

• Plugins 丰富的插件，使得webpack功能强大
• Performance webpack使用异步IO和多级缓存策略，可以显著提高编译效率
• Loaders webpack通过loader进行源文件的预处理，可以打包任何静态资源
• Support webpack支持AMD和CommonJS等多种模块方式，可以支持多种现有的库文件
• Code Splitting 代码分片 webpack可以将代码分片，按需加载，减少初始化加载时间
• Optimizations webpack可以通过优化插件实现代码优化，进行文件压缩等操作
• Development Tools webpack支持SourceMap，可以实现简单的调试作用
• Mutiple Targets 多目标环境，通常webpack打包资源的目的运行环境是Web环境，但它还可以支持Webworker和nodejs的打包

基本的配置文件

const cwd=process.cwd();
// http://webpack.github.io/docs/configuration.html
// 配置文件返回一个对象，对象主要包含以下属性：
// entry,output,module,resolve

module.exports={
    context:cwd+"/app",  //绝对路径
    entry:{
        page1:"./page1",
        page2:["./entry1","./entry2"]
    },
    output:{
        path:cwd+"/dist", //绝对路径
        //publicPath: 'http://localhost:8080/', 静态资源放置的位置
        filename:"[name].bundle.js",
        chunkFilename:"[id].bundle.js"
    },
    //CDN模板
    //     output: {
    //     path: "/home/proj/cdn/assets/[hash]",        hash是文件的hash
    //     publicPath: "http://cdn.example.com/assets/[hash]/"
    //     }
    // module.loaders是自动应用的loader的数组
    // 每一项都包含如下属性：
    // test: A condition that must be met
    // exclude: A condition that must not be met
    // include: A condition that must be met
    // loader: A string of “!” separated loaders
    // loaders: An array of loaders as string
   module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        }, {
            test: /\.html$/,
            loader: 'html'
        }, {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        }, {
            test: /\.css$/,
            exclude: helpers.root('src', 'app'),
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
        }, {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw'
        }]
    },
    resolve:{

    }
}

Loaders

Packages