首页 > 其他分享> 文章详细

webpack学习

2022-09-14 12:01:59 阅读：254 来源： 互联网

标签：index loader 学习 webpack path js css

webpack

webpack介绍

用于现代 JavaScript 应用程序的静态模块打包工具，将高版本的代码打包成低版本能使用的代码（兼容低版本）

webpack共分为四个部分* 入口 * 出口 * 加载器 * 插件

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

根据入口文件的依赖，加载所有模块js，然后合并成一个js;标准且纯粹的模块化打包工具 : 依赖一个文件为入口打包所有依赖为当前浏览器可用的代码。

webpack安装

webpack4之后的版本，需要全局安装webpack和webpack-cli，命令如下：

node -v ##确定已安装node

npm config get registry##确定npm镜像是淘宝镜像

##全局安装webpack和webpack-cli
npm i webpack -g
npm i webpack-cli -g

##还需要局部安装
npm i webpack-cli -D
##-D 可以替换成   --save-dev   意思是安装到编译时环境，在package.json中查看，是安装到devDependences里

webpack -v
##能查看到webpack和webpack-cli版本号即可认定安装成功。

新建项目（文件夹）

新建文件夹命名为：webpack-study，并初始化npm init -y

在项目中新建文件和文件夹：src，dist，index.html

webpack-study
----src                 //这里面是程序员写的代码，即webpack入口
--------index.js
--------b.js
----dist                //这里面是webpack生成的代码，即出口
----index.html
----package.json

b.js代码

function add(a,b){
    return a+b
}
module.exports=add

index.js

const add=require('./b')

console.log(add(1,2))  //3

配置`webpack.config.js`，

在项目根目录下新建webpack.config.js

const path=require('path')//webpack是基于node，在这里引入node的path模块

module.exports={
    entry:'./src/index.js',//指定入口
    output:{
        path:path.resolve(__dirname,'dist'),
        //这里必须是绝对路径（C：XX/yy/zz/index.js)，则采用path模块中的方法，对路径做剪切
        //相对路径长这样（../aaa/bbb/ccc/index.js)
        filename:'bundle.js'
    },
    mode:'development'//开发环境   改成production则为 产品环境（发布环境）
}

开发环境生成的bundle.js，里面包含了大量的注释和其他冗杂代码

产品环境即对外发布上线的版本，则非常精简，空格，分号等都被去掉，只有一行代码

运行

webpack

即可在dist文件夹下生成bundle.js

配置package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",  //别忘了这个逗号
    "build":"webpack"                    -------配置这一行
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

则后续每次编译，执行以下代码

npm run build

引入到index.html中

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>

浏览器打开后，查看控制台，即可看到执行结果。

配置css

在src文件夹下，新建css/normal.css

div{color:red}

index.html

<body>
    <div>
        变色的内容
    </div>
</body>

注意：我们并不是要把normal.css直接引入到index.html中，而是将其打包到bundle.js,再被引入到index.html中

引入两个loader来配置css，其中css-loader是引入css，style-loader是解析css

安装方式

npm i css-loader style-loader -D

配置方式

在webpack-config.js中添加module字段

const path=require('path')//webpack是基于node,在这里引入了node的path模块

module.exports={
    entry:'./src/index.js',//指定入口
    output:{
        path:path.resolve(__dirname,'dist'),
        //必须是绝对路径
        filename:'bundle.js'
    },
    mode:'production',
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:'style-loader'},
                    {
                        loader:'css-loader',
                        options:{
                        modules:true
                        }
                    }
                ]   
            }
        ]
    }
}

注意：loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。

所以一定要保证先配置style-loader，再配置css-loader，这样才能保证webpack从下往上，先引入（css-loader），后解析（style-loader）。

标签：index,loader,学习,webpack,path,js,css
来源： https://www.cnblogs.com/shibayuezhang/p/16692539.html

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

ICode9