webpack安装_前端_开心洋葱网

1、webpack前提

安装前首先安装node.js,不会的朋友可以参考本站的node.js安装文档，自行搜索

2、webpack安装

运行安装命令，Windows和linux/mac 一样的命令，上一步已经安装好了npm环境

$ npm install webpack -g

3、生成webpack

webpack.config.js

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    entry: {
        //源入口程序
        index: './src/index.js',
        //公共 第三方库
        vendor: ['jquery']
    },
    output: {
        path: '../static/magic/build',
        publicPath : '/static/magic/build/',
        chunkFilename : '[chunkhash:8].chunk.js',
        filename: '[name].js'
    },
    plugins: [
        //第三方包打包插件
        new webpack.optimize.CommonsChunkPlugin( /* chunkName= */ "vendor", /* filename= */ "vendor.bundle.js"),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        //多种loader，支持css/图片等
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?name=[path][name].[ext]'
        }]
    }
};

在此目录直接执行webpack命令生成