找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发gulp + Webpack使用方法

2018-10-25 分类：教程 阅读(670) 评论(0)
前端开发手机测试工具
前端开发手机横屏
开源前端 手机开发

可能使用到的插件有：
webpack-stream：webpack的gulp插件
vinyl-named：该插件保证webpack生成的文件名能够和原文件对上
style-loader：将css插入到页面的style标签
css-loader：是处理css文件中的url()等
url-loader：引入图片
raw-loader：原样输出
gulp-changed：判断文件是否更改，只传递更改过的文件

假设编译目录为：
文件目录

文件夹
gulp-file.js
package.json
webpack.config.js
node_modules
src # 源代码
jade
sass
es # ecma6
app # webpack
img
build # 编译后的文件
img
app # webpack打包后的文件

例子：
gulpfile.js

const webpack = require(‘webpack-stream’)
const webpackConfig = require(‘./webpack.config.js’)
const dirname = __dirname
gulp.task(‘webpack’, () => {
    const src = `${dirname}/build/js/app/**/*.js`,
        build = `${dirname}/build/app`
    gulp
        .src(src)
        .pipe(named())
        .pipe(webpackStream(webpackConfig))
        .pipe(gulp.dest(build))
})
gulp.task(‘default’, [‘webpack’])

webpack根据“文件夹/build/js/app”里面的js，将文件打包到“文件夹/build/app”里面。
如果选择不打包css和图片，可以不需要webpack.config.js。

webpack.config.js配置：
webpack.config.js

/* webpack配置 */
const webpack = require(‘webpack’)
const config = {
    output: {
        filename: ‘app.[name].js’,
    },
    module: {
        loaders: [
            { test: /^.*\.css$/, loader: ‘style-loader!css-loader’ },
            { test: /^.*\.(png|jpg)$/, loader: ‘url-loader’ },
        ],
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
        }),
    ],
}
module.exports = config

output：定义输出的文件名的规则。
new webpack.optimize.UglifyJsPlugin：对webpack打包后生成的文件进行压缩
loaders:：不同的文件进行不同的处理，loader的规则是从右往左。这里对css和图片进行处理，如果想只对css进行处理的话，可以使用raw-loader插件loaders

{test: /^.*\.css$/, loader: ‘style-loader!raw-loader’}

不对css中的url进行处理

自动监视打包：
gulpfile.js

const webpack = require(‘webpack-stream’)
const webpackConfig = require(‘./webpack.config.js’)
const changed = require(‘gulp-changed’)
const babel = require(‘gulp-babel’)
const dirname = __dirname
gulp.task(‘ecma6’, () => {
    const src = `${dirname}/src/es/**/*.js`,
        build = `${dirname}/build/js`
    gulp
        .src(src)
        .pipe(
            changed(build, {
                extension: ‘.js’,
            }),
        )
        .pipe(
            babel({
                presets: [‘es2015’],
            }),
        )
        .pipe(gulp.dest(build))
})
gulp.task(‘webpack’, () => {
    const src = `${dirname}/build/js/app/**/*.js`,
        build = `${dirname}/build/app`
    gulp
        .src(src)
        .pipe(named())
        .pipe(webpackStream(webpackConfig))
        .pipe(gulp.dest(build))
})
gulp.task(‘default’, [‘webpack’], () => {
    gulp.watch(
        [`${dirname}/build/css/**/*.css`, `${dirname}/build/js/**/*.js`],
        [‘webpack’, ‘reload’],
    )
})

因为是将build里面编译后的文件进行打包，所以应该监视的是build文件夹，但是由于gulp每次修改文件后所有匹配的文件都要更新，造成webpack多次打包。
所以用gulp-changed插件保证gulp只传递更改过的文件，避免webpack多次打包

前端开发不能本地手机测试
前端开发手机端适配问题
前端开发在手机上面看样式
赞(0)
前端开发者 » 前端开发gulp + Webpack使用方法
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论