webpack打包配置

1、在工程目录下建个webpack.config.js

2、Webpack.config.js配置文件内容，如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
    //页面入口文件配置
    entry: './app.js',
    //入口文件输出配置
    output: {
        path:__dirname+'/build',
        filename:'[name]-[chunkhash].js'
    },
    resolve: {
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['.js','.json']
    },
    target: 'node',
    context: __dirname,
    node: {
        __filename: true,
        __dirname: true
    },
    //加载器配置
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','stage-0']
                },
                exclude:/node_modules/
            }
        ]
    },
    plugins: [
        //newwebpack.optimize.UglifyJsPlugin()
    ]
};

3、在当前项目目录下，用命令行工具输入webpack，进行打包。

打包成功有如下信息：

4、打包完成后，当前工程目录下的build文件夹里会多出一个js文件

在build目录下使用命令行，输入 node + js文件名（node main-68f14ed836aa987600d2.js）

只有光标显示就是启动成功了！

 

代码示例：

const path = require('path');
const webpack = require('webpack');


let d = new Date();
let str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+"-"+d.getHours()+"-"+d.getMinutes()+"-"+d.getSeconds();
module.exports = {
    //页面入口文件配置
    entry: './app.js',
    //入口文件输出配置
    output: {
        path:__dirname+'/build',
        filename:'fb_host_app_'+str+'.js'
    },
    resolve: {
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['.js','.json']
    },
    target: 'node',
    context: __dirname,
    node: {
        __filename: true,
        __dirname: true
    },
    //加载器配置
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','stage-0']
                },
                exclude:/node_modules/
            }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin()
    ]
};