Gulp-webpack简单应用

1.配置环境：  在  webstorm  的控制台中  (1) cnpm install --save-dev gulp    (2)  cnpm install --save-dev gulp-webpack    

                                                       (3)cnpm install babel-loader babel-core babel-preset-es2017 --save-dev

2.目录结构：(  build文件夹 是在配置好所有文件后，在webstorm的控制台输入  gulp  后自动生成的)

3.gulpfile文件配置：

/**
 * Created by Administrator on 2016/11/16.
 */

const gulp = require("gulp");
const webpack = require("gulp-webpack");

gulp.task("copy_html_files", function () {
    gulp.src("src/**/*.html").pipe(gulp.dest("build"));
});

gulp.task("copy_package_json", function () {
    gulp.src("src/package.json").pipe(gulp.dest("build"));
});

gulp.task("compile_index", function () {
    gulp.src("src/index/index.js").pipe(webpack({
        output: {
            filename: "index/index.js"
        },
        module: {
            loaders: [
                {
                    test: /.js$/,
                    loader: 'babel', // 'babel-loader' is also a valid name to reference
                    query: {
                        presets: ['es2017']
                    }
                }
            ],
        },
        externals: {
            electron: "require('electron')",
            path: "require('path')",
            fs: "require('fs')",
            url: "require('url')"
        }
    })).pipe(gulp.dest("build"));
});

gulp.task("copy_main_js", function () {
    gulp.src("src/main.js").pipe(gulp.dest("build"));
});

gulp.task("default", ["copy_package_json", "copy_html_files", "copy_main_js", "compile_index"]);

4.根目录下的package.json配置好后：

{
  "name": "application-name",
  "version": "0.0.1",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2017": "^6.16.0",
    "gulp": "^3.9.1",
    "gulp-webpack": "^1.5.0"
  }
}

5.src 目录下的package.json是为了适应 electeon 的配置：

{
  "scripts": {
    "start":"electron ."
  },
  "name": "application-name",
  "version": "0.0.1",
  "main": "main.js"
}

6.src目录下的 main.js 文件也是为了适应 electron 的配置：

/**
 * Created by Administrator on 2016/11/16.
 */

const {app, BrowserWindow} = require('electron')
const path = require('path');
const url = require('url');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

function createWindow() {
    // Create the browser window.
    win = new BrowserWindow({ 800, height: 600})

    var filepath = path.join(__dirname, 'index.html');

    console.log(filepath);

    // and load the index.html of the app.
    //此处需要手动配置   index.html 的路径
    win.loadURL(url.format({
        pathname: path.join(__dirname, "index", 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // Open the DevTools.
    win.webContents.openDevTools();

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
    app.quit()
}
});

app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
    createWindow()
}
});

7.src目录中的index中的   index.html  引入的是  index.js文件

8.配置时，将工程配置为   npm   :