webpack 入门

介绍

webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.

核心概念

1. 入口(Entry)

//单一入口
module.exports={
    entry:'./path/to/my/entry/file.js'
};

//多入口
module.exports={
    entry:{
        index: './path/to/my/entry/file.js',
        test: './path/to/my/entry/file.js',
    }
};

２. 出口(Output)

//输出
module.exports={
    entry:'./path/to/my/entry/file.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'my-first-webpack.bundle.js'
    }
};

//输出
module.exports={
    entry:{
        index: './path/to/my/entry/file.js',
        test: './path/to/my/entry/file.js',
    },
    output:{
        path:path.resolve(__dirname+'/dist'),
        filename:'[name].js'   //[name]是当前被编译的js入口的文件名
    },
};

３. Loader

module.exports={
    entry:{
        index: './path/to/my/entry/file.js',
        test: './path/to/my/entry/file.js',
    },
    output:{
        path:path.resolve(__dirname+'/dist'),
        filename:'[name].js'  //[name]是当前被编译的js入口的文件名
    },
    module:{
        rules:[//转换
            {
                test:/\.css$/,
                use:[
　　　　　　{loader:'style-loader'},
                    {
                          loader:'css-loader',
                          options:{
                              modules:true
                          }
                    }
                ]
            }
        ]
    }
};

４. 插件(Plugins)

module.exports={
    entry:{
        index: './path/to/my/entry/file.js',
        test: './path/to/my/entry/file.js',
    },
    output:{
        path:path.resolve(__dirname+'/dist'),
        filename:'[name].js'  //[name]是当前被编译的js入口的文件名
    },
    module:{
        rules:[//转换
            {
                test:/\.css$/,
                use:[
　　　　　　{loader:'style-loader'},
                    {
                          loader:'css-loader',
                          options:{
                              modules:true
                          }
                    }
                ]
            }
        ]
    }，
　plugins: [
    　new webpack.optimize.UglifyJsPlugin(),
    　new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};