学习webpackgrunt/gulp的核心是Task。我们可以配置一系列的task，并且自定义要处理的任务（es6,t

什么是webpack？

本质上来讲，webpack是一个现代的javascript应用的静态模块打包工具
核心功能就是让我们可能进行模块化开发，会帮助我们处理模块间的依赖

和grunt/gulp的对比

grunt/gulp的核心是Task。我们可以配置一系列的task，并且自定义要处理的任务（es6,ts传化，图片压缩，scss转css），之后让grunt/gulp来依次处理这些task，让流程模块化，所以grunt/gulp也被称为前端自动化工具

什么时候使用grunt/gulp？

如果工程模块依赖非常简单，甚至没有用到模块化的概念
只需要简单的合并、压缩
如果项目使用了模块化管理，而且依赖非常强，就可以使用功能更强大的webpack

依赖环境：node,npm工具

安装：nom install webpack

基本使用

我们在tools创建一个模块函数并且导出
在main.js 导入该函数，并且调用

做完这一些列的操作后，我们在idnex.html中如何使用到num呢？

像这样？

结果应该都知道浏览器额并不识别commentjs的语法

我们需要webpack打包成浏览器能看懂的语言

打包命令： webpack ./src/main.js -o ./dist/bundle --mode development

dist文件夹生成了mainjs 转化为浏览器能识别的语言

但是这样一边又一遍的使用打包命令比较繁琐，所以我们来配置webpack，入口和出口，简化打包命令

在目录创建webpack.config.js

配置webpack.config.js

{
  "name": "webpackstudy",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bulid": "webpack"   //映射命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {  //开发依赖
    "webpack": "^5.23.0"
  }
}

什么是loader

在上面的实例中我们主要用来处理js代码，现在来说说css less scss 图片 ts .jsx .vue 的转化，但是相对于webpack来说对这些转化是不支持的

所以就出现了对webpack的扩展Loader,不同的文件转化需要不同的loader

css使用:npm install --save-dev css-loader 此功能只是将css加载出来

还要用到npm install --save-dev style-loader 将css挂载到dom

less：npm install --save-dev less-loader less 同时安装less

如果在安装过程中报错，可能是版本过高的原因

//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
const path = require('path')
module.exports = {//注意这里是exports不是export
   entry:  path.join(__dirname,"/src/main.js")  ,//唯一入口文件
   output: {//输出目录
       path: path.join(__dirname,'/dist') ,//打包后的js文件存放ß的地方
       filename: 'bundle.js',//打包后输出的js的文件名
       publicPath:'dist/' //涉及到url的都拼接此前缀，使用了HtmlWebpackPlugin自动生成index.html就不需要这个了
   },
   // mode:"development",  //没有设定是开发模式还是生产模式
   module: {
       rules: [
           {
               test: /\.css$/i,
               //多个use使用时 webpack从右到左一次读取
               //css-loader只负责将css文件进行加载
               //style-loader负责将样式添加到DOM中
               use: ["style-loader","css-loader"],
           },{
               test: /\.less$/,
               use: [{
                   loader: "style-loader" // creates style nodes from JS strings
               }, {
                   loader: "css-loader" // translates CSS into CommonJS
               }, {
                   loader: "less-loader" // compiles Less to CSS
               }]
           },{
               test: /\.(png|jpg|gif)$/,
               use: [
                 {
                   loader: 'url-loader',
                   options: {
                     limit: 310000   // 限制大小
                     name:'img/[name].[hash:8].[ext]' //重命名img 图片

                   }
                 }
               ]
           }, 
       ],
   }
};

处理es6 转化为es5语法

我们需要bable将es6转化es5

在webpack中，直接使用bable对应loader就可以了

npm install babel-loader babel-core babel-preset-env webpack

plugin是什么

plugin是插件的意思，指某个现有架构进行扩展

loader和plugin的区别

loader主要用于转换某些类型模块，他是一个转化器
plugin是插件，他是对webpack本身的扩展，是一个扩展器

plugin的使用：

通过npm安装需要使用的plugins 某些webpack已经内置的插件不需要安装
在webpack.config.js的plugins中配置插件

举个栗子：

添加版权声明BannerPligin

这个插件webpack内置只需要导入使用即可

再举个例子

打包html到dist

安装HtmlWebPlugin

配置

plugins: [
       new HtmlWebpackPlugin({
           template:'。/src/index.html'  //根据scr里的index.html这个模板在dist生成
       })
   ]

npm install html-webpack-plugin@3.2.0 --save-dev

打包之后 dist 文件多出index，并且自动加载了打包好的js文件

js压缩的plugin

npm install uglifyjs-webpack-plugin@1.1.1 -D

配置

plugins: [
       new UglifyjsPlugin()
   ]

本地服务器的搭建

插件：npm install -D webpack-dev-server@2.9.1

配置：

//webpack 服务器
    devServer: {
        contentBase: './dist',
        inline:true ,//实时刷新
    }

配置好后在scripts映射运行命令

执行 npm run dev

运行成功

以上操作下来发现问题如build丑化后不方便后期调试，所以我们需要对配置进行分离

在目录新建一个build文件夹里面再新建三个文件

把基本依赖放到base.config.js

把生产依赖放到dev.config.js

把开发依赖放到prod.config.js

通过安装 npm install webpack-merge 把base合并到开发依赖或者生产依赖

这样根目录的webpack.config.js可以删除了

因为删除了配置文件，然后在脚本修改配置路径到相应路径

学习webpack

什么是webpack？

和grunt/gulp的对比