webpack如何与gulpfile联合的使用

一、对webpack的一些理解

webpack支持CommonJS的书写形式。

CommonJS指一个文件一个模块，但会一次性加载（即同步加载），但在浏览器端不适用这种方式，加载速率什么的，于是引入了异步加载，其中有CMD（sea.js）与AMD（require.js）。
CMD:define(function (require, exports, module) {})延迟加载的方式，等用到资源了再加载，
AMD:define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {})提前加载的方式，用的时候资源已经加载完成

abc.js

document.write(require('./module.js')) // 添加模块

module.js

module.exports = 'It works from module.js.'

要上是引用模块的方式

二、安装使用

1.全局安装webpack

npm install webpack -g

2.建立一个package.json

npm init

3.安装webpack依赖

npm install webpack --save-dev

4.使用webpack开发工具，安装webpack-dev-server此时的outpath中没有输出，需要webpack -p发布了才有

npm install webpack-dev-server --save-dev

注：使用--save-dev的目的是使将所安装的依赖加入到package.json中。

 5.调试时执行命令

webpack-dev-server  --progress --colors

6.发布

webpack -p

三、webpack.config.js的常用功能及配置

1.entry:设置入口。存放主文件

2.output:设置输出

path:输出文件路径

filename:输出文件名称

publicPath:设置资源访问路径，即localhost:8080直接在该目录下访问，否则从根目录下访问

3.loader:Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换

test:匹配希望处理文件的路径
exclude:匹配不希望处理文件的路径
loader:此处xxx-loader可以简写为xxx，？后以query方式传递给loader参数

处理JS

{
        test: /.js$/,
        exclude: /node_modules|vue/src|vue-router//,
        loader: 'babel'
        //babel可以让我们在编写代码时使用ES6的版本
}

处理css

{
            test: /.css$/,
            loader: ExtractTextPlugin.extract(
                "style-loader",
                "css-loader?sourceMap"
            )
            //loader: "style!css" //用css-loader解析，再用style-loader解析
        }, {
            test: /.less$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            //loader: "style!css!less"//先用less-loader解析，再用css-loader解析，再用style-loader解析
 }    

以上使用extract-text-webpack-plugin将css从js代码中抽出并合并，如不需要则使用注释的代码

处理图片与字体

{
            test: /.(png|jpg)$/, 
            loader: 'url-loader?limit=8192' //  <= 8kb的图片base64内联
        },
            {
                test: /.woff(?v=d+.d+.d+)?$/,
                loader: 'url?limit=10000&minetype=application/font-woff'
            },
            {
                test: /.woff2(?v=d+.d+.d+)?$/,
                loader: 'url?limit=10&minetype=application/font-woff'
            },
            {
                test: /.ttf(?v=d+.d+.d+)?$/,
                loader: 'url?limit=10&minetype=application/octet-stream'
            },
            {
                test: /.eot(?v=d+.d+.d+)?$/,
                loader: 'file'
            },
            {
                test: /.svg(?v=d+.d+.d+)?$/,
                loader: 'url?limit=10&minetype=image/svg+xml'
            }

解析vue

{
      test: /.vue$/,
      loader: 'vue-loader'
  }

四、插件的使用

1.

 plugins: [
    new webpack.BannerPlugin('This file is created by pcd')
  ]

生成文件的顶部会出现这句话"This file is created by pcd".

2.在package.json中加入

"scripts": {
    "dev": "BUILD_DEV=1 webpack-dev-server --progress --colors",
    "build": "BUILD_PRERELEASE=1 webpack -p"
  }

开发

npm run dev

发布

npm run build

一下贴出我在vue.js简单配置的代码

webpack.config.js

var webpack = require('webpack')

module.exports = {
    entry: [
        './src/main.js'
    ],
    output: {
        /* path: __dirname + "/dist/js",
        publicPath: __dirname + "/dist/", *///也可以使用gulp下定义文件的路径
        filename: "app.js"
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel'
            },
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            },
            {
                test: /.vue$/,
                loader: 'vue'
            }

        ]
    },
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },//为了支持mian.js中的import的ES6的语法
    plugins: [
        new webpack.BannerPlugin('This file is create by aaa')
    ]
}

gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack-stream');
var connect = require('gulp-connect');



gulp.task('webpack', function() {
    return gulp.src('src/main.js')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('dist/js/'))
    .pipe(connect.reload());
});

gulp.task('webserver', function() {
  connect.server({
    livereload: true,
    root: 'dist'
  });
});

gulp.task('build.index', function(){
  return gulp.src('index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['webpack', 'webserver','build.index']);