ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Webpack的使用

2021-10-26 22:31:08  阅读:120  来源: 互联网

标签:文件 Webpack loader webpack 打包 使用 js css


概述

webpack是node工作流工具,是一个模块打包器。它的主要目的是将JavaScript的文件打包到一起,打包将复杂的、浏览器不识别的文件、语法变为浏览器识别的文件和语法后用于在浏览器中使用

官网地址:https://webpack.docschina.org/

webpack的核销思想就是下面的图示:

 webpack的基本使用

安装webpack的相关依赖

我们需要-g全局安装webpack和webpack-cli

npm install webpack webpack-cli -g

我们可以通过-v来查看版本号

 在src文件夹中新建一个index.js文件

function fun(a,b){
    return a +b;
}
console.log(fun(1,2))

此时输入打包命令,注意webpack5和webpack4打包的时候会有稍许的不同,webpack5进行的是文件夹的创建,webpack4一下创建的是文件夹和文件

webpack ./src/index.js -o ./build/build.js --mode=development

表示将./src/index.js文件的内容打包到./build/build.js文件中,如果是webpack5,就表示build.js文件夹中的main.js,--mode=development表示的是打包开发环境

此时我们的build文件中就有了webpack打包的代码

 

 还有一种打包方式是生产环境的打包

webpack ./src/index.js -o ./build/build.js --mode=production

 production打包的代码会进行压缩

production和development的区别

webpack进行打包的时候分为两种,一种是development(开发环境)面向开发者,一种是production(生产环境)面向用户

无论是开发环境还是生产环境,都是将ES6模块化编译为浏览器能识别的语法

两者有什么区别?

安装依赖的时候是有区别的,之前安装依赖的时候都是输入—-save **,比如

npm install –-save express或者 npm install express -S

此时的依赖无论是开发还是生产都需要用得到

如果只要是在开发环境用到的依赖,比如我们的webpack打包编译,在生产环境是不需要的,所以我们就单独给安装开发依赖 –-save -dev

npm install –-save -dev webpack 或者 npm install webpack -D

这种打包方式是有局限的,比如我们要打包css文件,此时会报错

 基本配置

需要有指导文件,指导webpack如何进行打包,webpack是依赖webpack.config.js来进行配置 的

webpack.config.js的配置

const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //打包模式development表示开发,production表示生产
    mode:"development"
}

此时输入命令webpack打包即可

 

 配置样式

如果我们要打包样式文件,需要配置相关的loader

index.js中只引入了css文件

import "./index.css"

配置哪些loader就需要这些loader的依赖

此时我们需要配置css,所以我们需要安装css,style的相关依赖

npm install style-loader css-loader -D
const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则,内部是json配置项,每一个json就代表一个loader
        rules:[
            {
                //引导打包文件和编译的文件为css文件
                test:/\.css$/,
                //内部执行哪些loader,loader的执行顺序是倒序的,后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码,添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式,内部是样式的字符串
                    'css-loader'
                ]
            }
        ]
    },
    //打包模式development表示开发,production表示生产
    mode:"development"
}

 此时打包css文件成功

如果还想配置less

需要安装less相关的loader

npm install less less-loader -D
const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则,内部是json配置项,每一个json就代表一个loader
        rules:[
            {
                //引导打包文件和编译的文件为css文件
                test:/\.css$/,
                //内部执行哪些loader,loader的执行顺序是倒序的,后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码,添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式,内部是样式的字符串
                    'css-loader'
                ]
            },
            {
                //引导打包文件和编译的文件为css文件
                test:/\.less$/,
                //内部执行哪些loader,loader的执行顺序是倒序的,后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码,添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式,内部是样式的字符串
                    'css-loader',
                    // less-loader的作用是将less文件变为css文件
                    'less-loader'          
                ]
            }
        ]
    },
    //打包模式development表示开发,production表示生产
    mode:"development"
}

配置html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>12345789</h1>
</body>
</html>

上面的html文件没有任何的引入,没有script标签

index.js

function fun(a, b) {
  return a + b;
}

console.log(add(1,2))

上面的js文件也没有任何的文件引入,没有require或者import

此时我们需要配置打包html模板的plugin插件

npm install html-webpack-plugin -D
const {resolve}=require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则,内部是json配置项,每一个json就代表一个loader
        rules:[
            {
                //引导打包文件和编译的文件为css文件
                test:/\.css$/,
                //内部执行哪些loader,loader的执行顺序是倒序的,后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码,添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式,内部是样式的字符串
                    'css-loader'
                ]
            },
            {
                //引导打包文件和编译的文件为css文件
                test:/\.less$/,
                //内部执行哪些loader,loader的执行顺序是倒序的,后写的先执行 
                use:[
                     // 识别css-laoder的js字符串为样式代码,添加到head标签
                    'style-loader',
                    // css-loader是将样式的代码翻译为js的模式,内部是样式的字符串
                    'css-loader',
                    // less-loader的作用是将less文件变为css文件
                    'less-loader'          
                ]
            }
        ]
    },
    plugins: [
        // 配置html的文件
        new HtmlWebpackPlugin({
          // template表示是引入的模板文件地址
          template: './src/index.html'
        })
      ],    
    //打包模式development表示开发,production表示生产
    mode:"development"
}

html-webpack-plugin作用会创建一个html文件,自动引入打包输出的资源,js/css文件

 

 

总结:

  •   html-webpack-plugin功能插件,作用就是自动让webpack识别模板,从而和入口文件进行整合,让浏览器可以进行展示
  •   html文件和js文件都不需要互相引用,webpack会自动整合

标签:文件,Webpack,loader,webpack,打包,使用,js,css
来源: https://www.cnblogs.com/keyeking/p/15468208.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有