webpack讲解

1，什么是webpack

webpack 本质上来说，是一个现代js应用的静态模块打包工具

重点：模块，打包

模块 :项目中会有很多的模块化，便于开发但是webpack就是把项目中所有的不同模块的js文件，打包成一个js文件，把所有不同模块的css文件打包成一个css文件，同理，图片一样，同时会帮我们处理模块间的各种依赖，整合打包
打包 :webpack打包时，会帮我们处理模块间的各种依赖，整合打包成一个或者多个包，并且进行资源处理，比如：压缩图片，将scss转为css，将ES6转为ES5语法等操作

image.png

gulp也可以打包（gulp 称为前端自动化任务管理工具）

使用情况
gulp: 当项目工程模块依赖比较简单，甚至没有用到模块化概念，只需要进行简单的合并，压缩，就使用gulp即可
webpack：项目使用模块化管理，依赖非常强，要使用强大的webpack
区别
gulp: 更加强调的是前端流程的自动化,模块化不是它的核心
webpack：更加强调模块化开发管理,而文件压缩合并,预处理等功能,是它的附带功能

附：将src下面的所有js文件转为ES5的语法，最终输出到dist文件夹中

image.png

2，webpackd的安装

1，webpack是基于node.js安装，node.js自带软件打包管理工具npm
2，安装webpack(同时也要安装 webpack-cli )

// 全局进行安装  操作指令：
cnpm install webpack webpack-cli -g

// 本地安装开发者环境， 操作指令：
npm install webpack webpack-cli -save-dev

3，webpack的起步

1，安装了webpack后，我们打包项目命令是：（webpack + 入口文件 + 出口文件 + 开发环境）

webpac ./src/index.js -o ./dist/bundle.js  --mode=development //  入口文件 + 出口文件 + 开发环境

2，配置文件

webpack
    dist ----打包好的文件放置的位置
    src ---资源文件夹
        index.js ---入口文件
        style.css ---样式文件
        protype.js ---这里准备了一个js文件，给vue原型上加一些函数
   index.html ---浏览器打开展示的首页
   package.json ---通过npm init 生成的配置文件，npm包管理的文件
   webpack.config.js  --- 专门来配置文件的，webpack一些配置，都是在这个文件中进行配置

3，最后在dist下生成了bundle.js文件，我们把这个js文件引入index.html文件中即可
4，如果每次使用webpack命令都要写入口和出口作为参数，就比较麻烦，所以我们要在webpack.config.js配置好出口与入口，这样我们每次使用webpack指令，就不需要写出口与入口了，请看下面讲解

4，webpack的配置

1，配置

//  绝对路径需要引用的包
let path = require('path')
module.exports = {
    mode:"development", // 开发环境
    entry:"./src/index.js", // 入口文件
    output:{ // 出口文件
        filename:"bundle.js", // 输出文件名称
        path:path.resolve(__dirname,'dist')  // 输出的绝对路径 ——> 这里就要引用 path
    }
}

2，操作:在html文件中引入打包好的js文件，运行项目，就可以在浏览器中 看到打印出来的东西了
在项目中，我们会用到 一些样式的引入，进行配置，这样打包时候，我们才能把引入的样式给打包进去，但是 webpack 默认是不可以打包 css 文件的，这时就需要 loader 配置

5，webpack中用到的组件 loader 使用

1，因为这里会用到插件，所以我们要先安装插件 loader

操作指令：npm install style-loader css-loader --save-dev

2，配置

let path = require('path')
module.exports = {
    mode:"development", // 开发环境
    entry:"./src/index.js",  // 入口文件
    output:{ // 出口文件
        filename:"bundle.js", // 输出文件名称
        path:path.resolve(__dirname,'dist')  // 输出的绝对路径 ——> 这里就要引用 path
    },
    module:{ // loader 配置
        rules:[ // 对于某个格式的文件进行转换处理
            {
                test:/\.css$/,
                use:[ // use 数组中的 loader 的顺序，是从下到上，逆序执行
                    'style-loader', // 将js的样式内容插入到style标签中
                    'css-loader'  // 将css文件转换为js
                ] 
            }
        ]
    }
}

引入打包好的文件，在控制台，运行起项目，即可
我们每次打包文件都要手动引入文件，比较麻烦；所以安装插件，在打包时，自动完成html与js文件之间关系

6，plugin的使用

由于我们要自动完成 html 与 js 文件之间的关系，所以这里的文件目录也会改变

1，配置文件介绍

webpack2
    dist ----打包好的文件放置的位置
    src ---资源文件夹
        index.js ---入口文件
        style.css ---样式文件
        protype.js ---这里准备了一个js文件，给vue原型上加一些函数
        index.html ---浏览器打开展示的首页
    package.json ---通过npm init 生成的配置文件，npm包管理的文件
    webpack.config.js  --- 专门来配置文件的，webpack一些配置，都是在这个文件中进行配置

2，webpack 打包时候，我们要安装 url-loader html-loader,所以我们要安装此配置

操作指令：npm install url-loader html-loader --save-dev

3，配置

let path = require('path')
// a，安装 html-webpack-plugin, 打包时候，我们要安装此依赖，
// 操作执行的命令：npm install html-webpack-plugin --save-dev，安装时候，可能会影响到 loader 的插件，所以操作完后，还要 npm install
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development", // 开发中环境
    entry:"./src/index.js",  // 入口文件
    output:{ // 出口文件
        filename:"bundle.js", // 输出文件名称
        path:path.resolve(__dirname,'dist')  // 输出的绝对路径 ——> 这里就要引用 path
    },   
    module:{ //loader 配置
        rules:[ // 对于某个格式的文件进行转换处理
            {
                test:/\.css$/,
                use:[ // use 数组中的 loader 的顺序，是从下到上，逆序执行
                    'style-loader', // 将js的样式内容插入到style标签中
                    'css-loader' // 将css文件转换为js
                ] 
            },
            {
                test:/\.(jpg|png|gif)$/,  // 对匹配的图片进行处理
                loader:'url-loader',
                options:{
                    limit:8*1024, // 如果图片小于 8kb base64处理，减少请求数量，会使的体积更大
                    esModule:false,  // url-loader 的 es6 模块化解析关掉
                    name:'[hash:10].[ext]'  // [hash:10] 取图片hash的前10位   .[ext] 取图片的扩展名
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            }
        ]
    },  
    plugins:[ // 插件配置    注意 这里是 plugins ，不是plugin，很容易出错
        new HtmlWebpackPlugin({
            template:'./src/index.html'  // 告诉打包模板，要打包的html在哪里，这里写的是 html 文件的位置在哪里
        })
    ]
}

4，当项目打包时用到文件，也要安装一个依赖，file-loader，

操作指令：npm install file-loader --save-dev

以上就是我这周学习的，使用 webpack 搭的服务环境