Day11-Webpack前端工程化开发

Webpack

一 webpack基本概念

遇到问题

开发中希望将文件分开来编写，比如CSS代码，可以分为头部尾部内容，公共的样式。

JS代码也希望拆分为多个文件，分别引入，以后代码比较好维护。

本地图片，希望可以实现小图片不用访问后端，保存在前端代码中就可以了

运行程序时我们希望你的文件越少越好，外部资源少了，减少对服务器访问次数。

比如JS我们希望项目只有一个，加载一次就可以。

CSS代码我们希望你项目只有一个，加载一次就可以

开发和最终运行代码产生了冲突？我们可以用Webpack解决这个冲突

概念

webpack是前端静态模块打包器,可以将我们错综复杂的文件，按照指定的规则打包成我们最终要部署的程序。

它主要有如下作用

• 构建前端工程化的项目
• 对源代码进行打包，得到最终要运行的代码

webpack能够实现：

• 将代码中所有JS依赖关系，打包后生成一个JS文件。最终引入到HTML代码中
• 将所有的CSS依赖关系，打包生成一个CSS文件，最终引入HTML代码中
• scss代码，可以直接编译生成css，以后写的scss代码，不用easy scss编译。
• 图片打包。大图片正常的打包放在项目中，小图片通过base64编码的方式保存在代码中。

通过webpack打包后的项目 体积更小、文件变的更少

二 图片的base64编码

项目中的图片,可以是文件的形式存在,也可以是base64编码的方式存在

我们将一张图片转化为base64编码，浏览器能直接识别这个编码。

在线转码网站：https://base64.us/

如果图片不是../d链接，而是用base64编码，浏览器不会去服务器加载图片，而是直接解析代码。效率会更高。

base64编码适合于小图片，图片越大，base64编码解析结果越大,影响网页的性能

三webpack项目环境搭建

(1)创建一个项目,并初始化项目

npm init -y

(2)在项目中安装webpack工具

npm install webpack --save-dev
npm install webpack-cli --save-dev

webpack:webpack的核心文件

webpack-cli:webpack的脚手架工具,利用他可以实现项目打包

—save-dev代表开发环境依赖.webpack只有在开发过程中才会使用,项目打包后就不用了

(3)下载服务器插件

npm i webpack-dev-server --save-dev

webpack-dev-server:webpack内置了一个服务器,可以通过这个来启动项目

(4)安装合并js的插件

npm i webpack-merge --save-dev

(5)下载项目启动插件

npm i cross-env --save-dev

(6)下载html打包插件

npm i html-webpack-plugin -D

-D就表示 —save-dev的意思

(7)下载CSS打包插件

npm i mini-css-extract-plugin style-loader -D
npm install css-loader@5.2.6 -D

mini-css-extract-plugin：这个插件用于打包CSS的插件，以后如果遇到index.js中import引入了CSS代码，我们就会启动这个插件来处理代码。

css-loader：解析CSS源代码

style-loader：解析CSS样式代码

(8)下载SCSS打包插件

npm i sass-loader -D

npm i node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass -D

node-sass这个包需要单独使用淘宝镜像下载

(9)下载图片打包插件

npm install url-loader file-loader html-withimg-loader -D

url-loader ：打包检测文件路径

file-loader：打包图片文件

html-withimg-loader：针对html网页中img图片打包

css-loader版本需要降低为5.2.6，否定背景图片和img标签打包生成两个文件

(10) 下载静态文件打包插件

项目中有些文件不参与打包。不参与打包的文件在打包过程中，原封不动复制到打包后的代码中。

npm i copy-webpack-plugin -D

四 搭建Webpack项目结构

(1)创建webpack配置文件

开发环境 程序开发时的环境,代码提示友好,代码格式规范.报错信息明确
生产环境 线上运行的环境, 积小\代码压缩\减少输出,代码中不要console.log

我们可以在项目的根目录下面创建三个文件

webpack.dev.config.js --->开发环境配置文件
webpack.prod.config.js --->生产环境的配置文件
webpack.base.config.js --->公共配置文件

开发环境和生产环境相同的代码,写在base文件中

开发环境自己特有配置dev这个文件

生产环境特有配置写在prod这个文件

(2)创建项目目录

前端工程化项目的标准目录结构

五 webpack配置文件信息

webpack.base.config.js

const path = require("path")
const HtmlWebpackPlugin =  require("html-webpack-plugin")
const MiniCssExtractPlugin =  require("mini-css-extract-plugin")
const webpack = require("webpack")
const CopyWebpackPlugin = require("copy-webpack-plugin")
//要打包的页面
let pages = ["index"]
//导出公共配置
module.exports ={
    //entry:代表我们打包的入口,告诉webpack我们要打包哪些文件
    entry:{
        ...pages.reduce((sum,value)=>{
                return {
                    ...sum,
                    [value]:`./src/js/${value}.js`
                }
            },{})
    },
    //output:打包后的文件,最终要保存到什么地方
    output:{
        // 打包的文件默认放在项目dist目录下面，项目没有dist目录创建一个
        path:path.resolve(__dirname,"dist"),
        filename:"js/[name].js"
    },
    plugins:[
        // 打包html
        ...pages.map(item =>{
            return (
                    new HtmlWebpackPlugin({
                        template:`./src/${item}.html`,  //文件路径
                        filename:`${item}.html`,        //打包后文件名字
                        chunks:[item]              //对应js是哪一个文件
                    })
                )
        }),
        // 打包css
        new MiniCssExtractPlugin({
            filename:"./css/[name].css"
        }),
        // 自动打包jquery
        new webpack.ProvidePlugin({
            "$":"jquery"
        }),

        // 打包静态资源
        // new CopyWebpackPlugin({
        //     patterns:[
        //         {"from":"./src/static",to:"./static"}
        //     ]
        // })
    ],
    module:{
        //配置css打包规则
        rules:[
            {
                test:/\.css/, //打包的文件项目中所有的css后缀名字
                include:[path.resolve(__dirname,"src")]   , //限制打包的范围，src这个目录找css
                exclude:/node_modules/, //排除项目node_modules
                use:[MiniCssExtractPlugin.loader,"css-loader"] //打插件
            },
            {
                test:/\.scss/, //打包的文件项目中所有的scss后缀名字
                include:[path.resolve(__dirname,"src")]   , //限制打包的范围，src这个目录找css
                exclude:/node_modules/, //排除项目node_modules
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"] //打插件
            },
            { //压缩 css 和 js 中的图片
                test: /\.(png|jpg|gif|jpeg|webp|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 8, // 8kb 大小以下的图片文件都用 base64 处理
                            outputPath: './images/',
                            esModule: false 
                        }
                    }
                ],
                exclude: /node_modules/
            },
            { // html 中的图片配置
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    
    // 配置端口号/默认启动页面
    devServer:{
        hot:true, //热加载，修改的代码立即生效
        port:8888, //默认端口8080，我们也可以进行修改8888
        open:true //true 默认打开首页（index.html）,["login.html"]
    }
}

webpack.dev.config.js

//引入公共配置
const base = require("./webpack.base.config")
//引入js文件合并工具
const {merge} =  require("webpack-merge")

//base中所有的配置信息都可以和当前文件合并在一起
module.exports = merge(base,{
    // mode代表当前打包的模式development，开发环境
    mode:"development"
})

webpack.prod.config.js

//引入公共配置
const base = require("./webpack.base.config")
//引入js文件合并工具
const {merge} =  require("webpack-merge")

//base中所有的配置信息都可以和当前文件合并在一起
module.exports = merge(base,{
    // production代表生产环境
    mode:"production"
})

在项目找到package.json文件,这个文件里面修改的代码如下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_EVN=development webpack-dev-server --config webpack.dev.config.js",
    "build": "cross-env NODE_EVN=production webpack --config webpack.prod.config.js"
  },

六 运行和打包

运行命令

npm run dev

npm run dev:代表在开发环境下运行代码,将打包后代码直接运行到浏览器看效果.不会生成dist这个目录.

打包命令

npm run build

七 webpack概念

1 webpack的核心概念

entry:入口 告诉webpack哪些页面需要打包
output:输出 告诉webpack打包后的文件保存到哪里
loader:模块转换器 webpack 只能识别JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件(html,css,sass...)
plugin:插件 插件的功能跟loader类似,但是比loader的功能更强加
mode:模式 我们可以通过模式来配置项目的环境

2 webpack的基本功能

代码转换：scss转css
文件优化：打包的时候会对 html js css 图片等文件进行压缩
代码分割：一个页面的js文件可以拆分成多个js文件
模块合并：多个js文件可以合并成一个js文件
自动刷新：代码修改后立即生效
代码校验：校验语法的正确性和规范性

3 webpack的常用loader

css-loader
sass-loader
style-loader

八 前端模块化开发

前端模块化的概念

前端模块化主要有以下几个标准:

1. AMD:Require.js这个插件用来实现模块化,第三方标准
2. CMD:Seajs也是用于实现模块化的技术,第三方的标准
3. Common.js:Nodejs中用的模块化就是这个标准
4. ECMAScript2015标准:ES6官方标准(我们学的就是这个标准)

在ES6之前并没有提供模块化的概念

a.js代码中无法引入b.js的代码.js文件都要依赖于HTML来作为中转

JS采用了模块化开发,每个JS文件都会有一个独立的作用域.以前需要IIFE才能划分独立作用域,现在只需要模块化就可以解决问题

模块的暴漏和模块的导入