gulp&&webpack打包

gulp

创建gulp.js文件

• gulp.src
  文件输入
• gulp.dest
  文件输出
• gulp.task
  建立任务，参数（名称，函数）
• gulp.watch
  监控文件变化，重启程序输出，不用频繁手动编译
  gulp+browserify配置nodejs转chrome代码

var gulp = require('gulp')
uglify = require('gulp-uglify')
var minifyHtml =  require('gulp-minify-html')

gulp.task('script', function(done) {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 压缩文件
        .pipe(uglify({ mangle: false }))
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('.'));
    done();
})
gulp.task('html', function() {
    // 1. 找到文件
    gulp.src('js/*.html')
    // 2. 压缩文件
        .pipe(minifyHtml())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('.'));
     done();
})
gulp.task('default', gulp.series(gulp.parallel('html','script')));

执行gulp default即可

gulp和webpack的区别

• gulp前端打包
• webpack模块打包方便import（editor.md不是webpack打包，import会产生很多依赖问题）、entry输入、output输出

webpack

创建webpack.config.js文件

loader：函数预处理，不同类型文件使用不同loade打包r，file-loader(生成md5)、html-loader
plugin：loader扩展

• copy-webpack-plugin插件，只拷贝不合并文件

module：每个模块的处理规则，include指定文件路径
target：node、web
devtool：sourcemap选项

• eval： 生成代码 每个模块都被eval执行，并且存在@sourceURL
• source-map： 产生.map文件
• cheap： 不包含列信息（代码精确到列的位置信息)也不包含loader的sourcemap
• module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）
• inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）
  entry：每个输入相对独立，有相互依赖的使用CommonsChunkPlugin 配置

打包过程调试package.json：
node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

执行webpack或者webpack a.js命令

压缩

支持ES6

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin');
optimization: {
        minimizer: [new TerserPlugin()]
    }

只支持ES5需要babel转换ES6

npm install -D uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
plugins:[new UglifyJsPlugin({
            uglifyOptions:{
                 output: {
                     comments: false,
                     beautify: false,
                 },
                 compress:true
             }
         })]

webpack只支持js打包，其他文件需要特殊loader

webpack打包优化

webpack的dll模块，提高打包效率
webpack-dev-conf.js或者dev-server.js中可以模拟后端数据，类似express架构

parcel零配置打包工具

安装：yarn global add parcel-bundler

问题

• webpack打包缺少模块，externals可以解决，或者坑能是node_modules模块本身编译有问题，npm install后重新编译

• webpack打包fs、child_process等模块到chrome会报错，可以添加node节点，使浏览器过滤掉一下模块

node: {
      module: 'empty',
      dgram: 'empty',
      dns: 'mock',
      fs: 'empty',
      http2: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
    },

• 关联依赖包太多，路径问题，导致网页访问路径错误