webpack 入门

官网doc http://webpack.github.io/docs/tutorials/getting-started/

npm install webpack -g

添加一个 webpack.conf.js

//webpack配置文件栗子

module.exports =  {
    watch: true,
    entry: entry_file,
    debug: true,
    devtool: 'source-map',
    output: {
        path: path.resolve(process.cwd(),'dist/'),
        filename: '[name].js',
        chunkFilename: '[name].min.js',
        publicPath: path.resolve(process.cwd(),'buildPath/')
    },
    resolve: {
        alias: {
                jquery: 'global/lib/jquery.js',
                template: 'global/lib/template.js',
                underscore: 'global/lib/underscore.js',
          }
    },
    plugins: [
        CopyWebpackPlugin...,
        webpack.ProvidePlugin...,
        webpack.optimize.DedupePlugin...,
        ExtractTextPlugin...,
        webpack.optimize.CommonsChunkPlugin,
        WebpackNotifierPlugin...,
        webpack.DllReferencePlugin...
    ],
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            exclude: /(node_modules)|(global\/lib\/)/,
            loader: 'babel-loader'
        },
        ...
        ]
    }
}

entry

{
    page1: 'path/to/page1',
    page2: 'path/to/page2',
    common: ['jquery', 'react', 'react-dom']
}

entry 的格式如上，指定了要导出3js文件。page1、2都对应一个入口文件。 common对应了几个文件。

最后输出 page1.js page2.js common.js。

watch 是否watch文件变化

debug 是否开启debug

devtool 选择一个 devtool 来增强 debug

参考 https://segmentfault.com/a/1190000004280859

cheap-source-map 方便调试
然带上 eval 参数的可以快更多，但是这种 sourceMap 只能看，不能调试，得不偿失。

output 文件输出的配置

path:

输出文件的目录， 这里为 dist目录

filename:

'[name].js' [name]对应enrty的key

chunkFilename:

异步加载的文件 这里的[name]该文件在编译后对应的一个模块数字 生成如 1.min.js

publicPath:

异步的加载文件对应的build目录

比如 imgae: url(./img/bg.png); 编译后则为 imgage: url(/buildPath/bg.png);

resolve 配置模块路径alias

{
    jquery: 'global/lib/jquery.js',
    template: 'global/lib/template.js',
    underscore: 'global/lib/underscore.js',

}

不详述。配置更多的alias可以方便代码书写，提高webpack寻找模块的速度，提高编译速度。

plugins: 配置webpack插件

插件系列会新开篇章

loaders: 配置 文件对应的loaders

也在插件篇章

调优

会新开优化篇章