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'

  }

四、插件的使用

 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']);

巴特西

webpack如何与gulpfile联合的使用

最新文章

热门文章