webpack&gulp集成简介

小灰灰 2022-09-23 03:42 179阅读 0赞

### webpack简单介绍 ###

webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.摘自github webpack页面。webpack以CommonJS规范在本地对js进行模块化处理打包，不再需要引入requirejs或seajs。可以通过不同的loader来对其他格式的文件进行处理。接下来会介绍下爱屋吉屋如何使用gulp和webpack来处理前端代码，并且会介绍一些集成过程中遇到的坑。文中最后把gulpfile.js和package.json里面的代码贴出来，仅供参考。

### gulp和webpack集成使用介绍 ###

安装完Nodejs环境后，把本文后面的package.json文件安装，gulp要全局安装（npm install gulp -g）。

创建webpack对象
    var webpack = require("webpack")
    创建gulp默认任务
    //gulp --product
    gulp.task('default', function() { 
      isProduct = argv.product;
      isWatch = !isProduct;
      console.log('正在处理：' + (isProduct ? '线上' : '本地') + '环境');
      fse.emptydirSync('./dist');
      gulp.start('webpack');
    });

本地开发(命令：gulp)和线上(命令：gulp --product)部署gulp命令分开，本地会做文件更改的监听，并且不会压缩。
    ps:fse库是对自带的fs库做了很好的扩展，推荐使用。

### webpack任务配置 ###

最全配置代码参考gulpfile.js。

*  入口文件配置：

entry: { index: './index.js' common: [ 'jquery', 'understore', 'template', 'store' ] }
    该参数主要是配置入口文件，打包出来的文件就是以里面的key作为名字的文件（即bundle）。

==注意点:[]和字符串的区别，如果是字符串(比如：'./index,js'),那么该文件（index.js）是不能在其他模块进行require的，如果既要作为入口文件又要在其他模块require，那么需要用数组的方式配置，即['./index.js']。可以看下打包后的代码，字符串的配置该文件代码会在索引为0的地方，如果配置成数组，则位置为0的函数中是没有自己代码的，只是来执行其他模块的代码==

*  输出路径配置：

output: { path: './dist/', filename: '[name].js', publicPath: '' }
    文件会被输出到dist目录下，文件名是以当前文件名做为输出后的文件名。

*  别名配置：

resolve: {
                alias: {
                    jquery: path.resolve('../global/lib/jquery.js'),
                    template: path.resolve('../global/lib/template.js'),
                    understore: path.resolve('../global/lib/underscore.js'),
                    store: path.resolve('../global/lib/store.js')
                }
            }
      ```
    配置完别名，就可以用别名来进行require了，不管是在webpack配置中，还是在js代码中。比如，在entry中的common模块就可以直接用understore，在打包时就会通过别名找到具体的路径。==别名的值最好是绝对路径，当时我们用相对路径如果只是同一个目录结构没有问题，但是多个目录结构的引用就会出现路径解析错误。绝对路径转换使用path.resolve该方法即可==

### webpack插件： ###

一些特殊功能可以通过webpack插件进行完成。

1.  webpack内部全局变量

new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        template: 'template',
        store: 'store',
        _: 'understore'
    })

配置完全局的变量，在js中就直接可以用，不需要再require。该全局不是挂载到window对象上，只对webpack打包出来的js有用。  
2. 模块唯一插件  
new webpack.optimize.DedupePlugin()

该插件会把相同的模块合并，不推荐使用，最好自己做到模块唯一性，如果打出来两个相同的模块，说明你的代码潜藏出错风险  
3. css抽离插件  
new ExtractTextPlugin(“\[name\].css”)

该插件会把css抽离出来作为单独的css文件进行打包，如果不使用该插件，会把css打包到js中，然后以style标签的形式，把css作为内联样式使用。  
4. 公共文件插件

new webpack.optimize.CommonsChunkPlugin(‘common’, ‘common.js’)

该插件会把公共的模块进行抽离到公共的js模块里面，防止js重复引用打包。  
5. 压缩插件

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false },
            mangle: { except: ['$', 'm', 'webpackJsonpCallback'] }
        })

该插件会把js进行压缩，在线上环境进行使用。mangle该关键词不需要混淆，因为在我们实践过程中，压缩后的代码有很多地方报错，故上面3个不混淆的值是根据我们自身项目来的。

sourcemap：

由于webpack会把所有的js都打包到一个js文件中，这样就不方便开发人员debug，故需要进行sourcemap的配置

devtool: (isProduct ? false : ‘source-map’)

线上环境不需要sourcemap，加上source-map参数，会在打包的时候打出来map文件，chrome浏览器会解析sourcemap进行定位到相应的文件。

### 加载器loader： ###

1.  js加载器

{
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            compact: false
        }
    }

js使用babel来进行加载，这样就可以使用一些es6的特性来开发，IE8下面使用如下方案来进行解决转换后的代码不兼容问题。

==解决IE8 babel 转换：我们把shim.js & sham.js，自己合并到一起吧==

2. css、less、sass加载器

{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues') }, { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!less-loader') }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!sass-loader') }

ExtractTextPlugin是抽离css的插件。css-loader是处理css，会把url(xxx.png)处理成require，然后通过对应后缀名的其他加载器进行处理。==如果是线上环境，css会进行压缩，很多配置要进行调整如果直接采用默认的，转换后的css会出现一些问题==

a)问题一，压缩后字体文件不能处理。解决方法：把iconfont.css里面的注释删除掉即可  
b)问题二，压缩后的px单位会转换成pc,pt。解决方法：在加载器里面加上-convertValues参数。  
c)问题三，css require的优先级问题，按照常理是后require的css是后加载。但是在实践过程中，(1)通过import引入的js模块中引入的css是优先于require引入的js模块中引入的css；(2)js中require的css名称如果和js所在模块的文件夹名字相同即使部分相同的话，优先级也会提高。

关于css加载器的参数可以参考cssnano。css-loader是根据cssnano对css进行处理的。  
3. 图片字体文件加载器，file-loader

{ test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/, loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]" }

对一些图片和字体资源进行加载，我们会把相关文件抽离出来进行名字加上hash值的前7位做了处理后的名字。  
4. html加载器

{ test: /\.html/, loader: "html-loader" }

我们主要把模板文件建成一个Html，然后在Js引入，这样该html就会以字符串格式的值赋给一变量，然后我们用arttemplate进行页面渲染。

脚本文件  
gulp脚本 gulpfile.js