webpack以及打包总是出现错误

不念不忘少年蓝@ 2022-05-23 00:38 283阅读 0赞

## 什么是webpack ##

是一个模块打包器。任何静态资源都可以当做是模块，然后模块 之间也可以相互依赖，通过webpack对模块进行处理以后，可以打包成我们想要的资源

## webpack的特点 ##

*  支持CommonJS和 AMD模块，意思就是哦们可以无痛迁移旧的项目
 *  支持模块加载器，和插件机制，可对模块进行灵活的定制，特别是babel-loader有效支持es6
 *  可以通过配置，打包成多个文件，有效的利用浏览器的 缓存功能，提升性能
 *  将样式文件和图片等的静态资源也可以视为模块进行打包，配合loader加载器，可以支持sass，less等css预处理器
 *  内置source map,即打包在一起依旧方便调试

## 安装webpack ##

*  全局安装：`npm install webpack -g`
 *  webpack -w 提供watch方法，实时打包跟新
 *  webpack -p对打包后的文件进行压缩
 *  webpack -d提供sourcemap,方便调试
 *  webpack –config以某个config作为打包
 *  webpack –help更多命令

## 然后打包的过程中总是出现错误 ##

![这里写图片描述][70]

## 最后换了一个低版本的 ##

> npm install webpack@3.0.0 -g  
> 在进行打包就好了  
> ![这里写图片描述][70 1]

## 配置文件 ##

*  webpack在执行的时候可以通过指定的配置文件
 *  默认情况下会执行当前的目录中的webpack.config.js
 *  配置文件是一个node.js模块，返回一个json格式的配置信息对象

## 加载图片 ##

url-loader会将样式中引用到的图片转为模块来处理

npm install url-loader

limit的参数意思是图片大小小余界限的时候，会自动启动启用base64编码图片

## 使用es6 ##

npm install babel-core
    npm install babel-loader
    npm install babel-preset-es2015
    ////////////////////////////////////
    {loader:'babel-loader',excluder:/node_moudles/,test:/\.js?$/,query:{compact:false,presets:['es2015']}}

## 打包成多个资源文件 ##

entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的\[name\]

## 公共模块 ##

我们利用插件就可以智能提取公共部分，以提供我们浏览器的缓存复用

plugins:[
    new webpack.optimize.CommonsChunkPlugin('commmon.js')
    ]

我们需要手动在html上去加载common.js,并且是必须要最先加载

## gulp和webpack ##

var gutil =require('gulp-util');
    var webpack=require('webpack');
    var webpackConfig=require('./webpack.config.js');
    gulp.task('webpack',function(callback){ 
        var myConfig=Object.create(webpackConfig);
        webpack(
            myConfig,
            function(err,stats){ 
                callback();
            });
    });

## 防止频繁的进行打包可以对他进行监视 ##

监控所有的页面，gulp和webpack结合使用

gulp.task('default',function(){ 
        gulp.watck('./**',['webpack']);
    });

## webpack-dev-server ##

当前目录作为根目录，启动一个服务，会自动的打包，实时刷新

[70]: /images/20220523/35b56103276f4a03ac588174ccfc4e17.png
[70 1]: /images/20220523/d8aa377888024087ac04bdb2c36d943b.png