什么是webpack?

webpack是前端的一个项目构建工具,他是基于Node.js开发出来的一个前端工具;

首先思考个问题:

网页中引入的静态资源多了以后有什么问题?

  1. 网页加载速度慢,因为我们要发起很多次的二次请求;
  2. 要处理错综复杂的依赖关系

那么如何解决呢?
解决方案:

  1. 合并、压缩、精灵图、图片的Base64编码
  2. 可以使用之前学过得requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系。

但要如何完美实现上述的2种解决方案?

  1. 使用Gulp,是基于task任务的;
  2. 使用Webpack,是基于整个项目进行构建的;
  • 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能
  • 根据官网的图片介绍webpack打包的过程

不得不说用webpack去构建项目时,装插件装的想吐,感觉就是积木战士,就一核心,其他都是一块块积木拼接而成。

  • npm initnpm init -y
  • cnpm i webpack-dev-server -D
  • 会提示没装webpack,那么npm install webpack webpack-cli
  • 创建webpack.config.js
//由于webpack是基于Node进行构建的,所有webpack配置文件中,任何Node代码都是支持的
var path =require('path')
//当以命令行形式运行webpack或webpack-dev-server的时候,工具会发现我们并没有提供要打包的文件入口和出口文件,此时,他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个配置对象,然后根据这个对象进行打包构建
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//输出路径
    output:{
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'bundle.js'//指定输出文件的名称
    }
    
}
  • package.json文件
"scripts":{
    "test":echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}
  • cnpm i html-webpack-plugin -D后,改webpack.config.js文件
//由于webpack是基于Node进行构建的,所有webpack配置文件中,任何Node代码都是支持的
var path =require('path')
//在内存中,根据指定的模块页面生成一份内存中的首页,同时自动把打包好的bundle注入到页面底部
//如果要配置插件,需要在导出的对象中,挂载一个plugins节点
var htmlWebpackPlugin=require('html-webpack-plugin')
//当以命令行形式运行webpack或webpack-dev-server的时候,工具会发现我们并没有提供要打包的文件入口和出口文件,此时,他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个配置对象,然后根据这个对象进行打包构建
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//输出路径
    output:{
        path:path.join(__dirname,'./dist'),//输出路径
            filename:'bundle.js'//指定输出文件的名称
    },
    plugins:[
        template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
    filename:'index.html'//设置生成的内存页面名称
    ]

}
  • cnpm i style-loader css-loader -D后,改webpack.config.js文件
//由于webpack是基于Node进行构建的,所有webpack配置文件中,任何Node代码都是支持的
var path =require('path')
//在内存中,根据指定的模块页面生成一份内存中的首页,同时自动把打包好的bundle注入到页面底部
//如果要配置插件,需要在导出的对象中,挂载一个plugins节点
var htmlWebpackPlugin=require('html-webpack-plugin')
//当以命令行形式运行webpack或webpack-dev-server的时候,工具会发现我们并没有提供要打包的文件入口和出口文件,此时,他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个配置对象,然后根据这个对象进行打包构建
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//输出路径
    output:{
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'bundle.js'//指定输出文件的名称
    },
    plugins:[
            template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
    filename:'index.html'//设置生成的内存页面名称
    ],
    module:{//配置所有第三方loader模块的
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//处理css文件的loader
        ]
    }

}
  • 同理配置less和scss(注意scss的loader是 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},)
  • 默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是url地址都处理不了,所以要导入loader,cnpm i url-loader file-loader -D
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=238,760&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
        //    limit给定的值,是图片的大小,单位是byte,如果我们引用的图片大于或者等于则会被转为base64格式的字符串,小于则不会、
            {test:/\.(ttf|svg|woff|woff2|eot)$/,use:'url-loader'},//处理字体文件的loader

哎,最后还是将希望放在vue-cli 手脚架上,频繁的进行插件的下载对代码的编写和进程都会有一定的阻断和影响。尤其是网不好的时候。