webpack初学者第一版

妖狐艹你老母 2022-04-16 00:41 206阅读 0赞

# webpack的配置信息 #

nrm的使用

*  npm i nrm -g 全局安装nrm（提供常用的下载包地址，真正使用的装包工具还是npm）
 *  nrm ls 查看清单列表（查看镜像地址，所谓镜像地址，就是从\[[https://registry.npmjs.org][https_registry.npmjs.org]
 *  \](官网)原版复制过来，方法和名称是一样，只是服务不一样）
 *  nrm use cnpm 使用cnpm的镜像地址
 *  npm i jquery 使用cnpm的镜像下载jquery

cnpm是一个装包工具

*  npm i cnpm -g 下载后使用的是cnpm装包工具，不是上面的镜像地址
 *  cnpm i jquery 使用cnpm装包工具下载jquery

webpack是什么？

*  加载前端静态资源会发送二次请求，而且会有错综复杂的依赖关系（比如引入bootstrap还要引入jquery）
 *  webpack是基于node构建前端项目的工具（gulp是处理task小任务的，然后构建起来）

webpack的作用

*  可以减少二次请求，可以处理错综复杂的依赖关系
 *  可以将高一级语法（es6）装换成低一级语法
 *  可以完美实现资源的合并、打包、压缩、混淆等诸多功能

前期文件的准备工作

![node\_modules是包工具][node_modules]

在项目根目录下新建dist(存放我们的要转换的文件，给客户的文件),src(开发的文件，新建css，images，js文件夹，index.html,main.js（项目的入口文件）)

webpack的使用

1.  webpack ‘输入地址’ ‘转换成文件的地址’  
    会报错，我们可以全局和本地安装webpack和webpack-cli（4以上的版本是分开的，所以要逐个安装）  
    还要指定开发环境和生产环境
2.  直接使用webpack不加命令和地址  
    这里相当于node每次都要输入webpack  
    webpack怎么运行：当输入webpack，我们并没有指定的出口和出口，然后我们会找到根目录的配置文件  
    (webpack.config.js)解析执行配置文件，导出配置对象，拿到配置对象，指定出口和入口，然后进行打包构建  
    var path = require(‘path’)
    
        module.explores={
        
        	entry:path.join(__dirname,'./src/main.js'),
        
        	output:{
        
        	path:path.join(__dirname,'./dist'),
        	//path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        
        	filename:'bundle.js'
        
        }
        
        }
    
    问题：但是每次都要输入webpack，想跟node一样可以输入nodemon即可更新
3.  ## webpack-dev-server   本地安装webpack和webpack-cli （没安装会报错提箱）   npm i webpack-dev-server -D 本地安装server   npm init -y 安装package.json文件   配置启动server（因为我们不能启动），所以配置package.json在scripts   “dev”:“webpack-server-dev --open --port 3000 --contentBase src --hot” ##
    
    –open 实现帮我们自动打开浏览器  
    –port 自定义端口号  
    –contentBase 设置网站根目录文件，index.html  
    –hot 实现下载热更新（保存文件浏览器会自动刷新网站，生成的bundle.js试想局部刷新，不会出现整个刷新的情况）  
    问题：使用–contentBase比较繁琐，需要制定根目录，而且会使用script引入物理磁盘的bundle.js
4.  html-webpack-plugin   
    npm i html-webpack-plugin -D 生成一个index.html内存的页面,然后把打包好的bundle.js注入到页面中  
    package.json: “dev”:“webpack-server-dev”  
    如果在物理路径使用，则src是根目录，容易找不到文件  
    配置webpack.config.js  
    const path = require(‘path’)  
    const webpack = require(‘webpack’)  
    const htmlWebpackPlugin = require(‘html-webpack-plugin’)  
    //所有的插件都使用在plugins里面  
    module.exprots = \{  
    extry:path.join(\_\_dirname,’./src/main.js’),  
    output:\{  
    path:path.join(\_\_dirname,’./dist’),  
    filename:‘bundle.js’  
    \},  
    plugins:\[  
    new htmlWebpackPlugin (\{  
    template:path.join(\_\_dirname,’./src/index.html’),//z指定我们的模板文件  
    filename:‘index.html’  
    \})  
    \]  
    \}
5.  第三方配置文件  
    在plugins同级引入module模块，下载第三方配置文件，rules属性 ，存放第三方文件和处理规则  
    .css处理 npm i style-loader css-loader -D  
    .less npm i less-loader less -D  
    .scss npm i sass-loader node-sass --save-dev  
    //如果使用npm下载不了node-sass则使用cnpm，而且不要单独下载  
    module:\{  
    rules:\[  
    \{test:/.cssKaTeX parse error: Expected 'EOF', got '\}' at position 36: …','css-loader'\]\}̲, \{…/,use:\[‘style-loader’,‘css-loader’,‘less-loader’\]\},  
    \{test:/.cssKaTeX parse error: Expected 'EOF', got '\}' at position 50: …,'sass-loader'\]\}̲, \] …/,use:‘url-loader?limit=7632&name=\[name\].\[ext\]’\}  
    //会全部转换为base64，虽然减少二次请求，但是我们大图片不需要转换，所以传参数？ &  
    小于7632byte时，则还是base64  
    //会帮我们转成长字符串，防止图片重名 &name=\[name\].\[ext\] 不转换我们的名字  
    //如果不同目录的images重名，默认放在都是在项目根目录  
    想要原来的名字，但又不能重名导致图片替换，可以加个哈希值 \[hase:8\]-\[name\].\[ext\]  
    7.字体配置  
    \{test:/.(ttf|eot|svg|woff|woff2)$/,use:‘url-loader’\}  
    webpack.config.js  
    const path = require(‘path’)
    
        const webpack = require('webpack')
        
        const htmlWebpackPlugin = require('html-webpack-plugin')
        
        module.exports = {
        
            entry:path.join(__dirname,'./src/main.js'),
        
            output:{
        
                path:path.join(__dirname,'./dist'),
        
                filename:'bundle.js'
        
            },
        
            plugins:[
        
                new htmlWebpackPlugin({
        
                    template:path.join(__dirname,'./src/index.html'),
        
                    filename:'index.html'
        
                })
        
            ],
        
            module:{
        
                // 这个节点用于配置第三方所有的模块加载器
        
                rules:[
        
                    {test:/\.css$/,use: ['style-loader', 'css-loader']},
        
                    {test:/\.less$/,use: ['style-loader', 'css-loader','less-loader']},
        
                    {test:/\.scss$/,use: ['style-loader', 'css-loader','sass-loader']}
        
                    // 从右到左调用规则
        
                ]
        
            }
        
        }
    
    package.json  
    “scripts”: \{
    
        "test": "echo \"Error: no test specified\" && exit 1",
        
            "dev": "webpack-dev-server"
        
          },
    
    控制台终端输入: npm run dev
6.  配置HotModuleReplacementPlugin() 插件节点  
    package.json: “dev”:“webpack-server-dev”  
    const path = require(‘path’)
    
        //const webpack = require('webpack')
        
        const webpack = require('webpack')
        
        //使用热更新导入包
        
        module.exports = {
        
            entry:path.join(__dirname,'./src/main.js'),
        
            output:{
        
                path:path.join(__dirname,'./dist'),
        
                filename:'bundle.js',
        
                open:true,
        
                port:5000,
        
                contentBase:'src',
        
                hot:true
        
                // 使用第二种方式npm run dev
        
            },
        
            plugins:[//配置插件的节点
        
                new webpack.HotModuleReplacementPlugin()
        
                //热更新的模块对象
        
            ]
        
        }
    
    命令  
    –save-dev（-D） ：安装到本地依赖（开发环境中：package.json devDependencies ）  
    –save（-S） : 生产环境中（package.json devdependencies）  
    npm i webpack --save-dev 安装到项目依赖中  
    npm i webpack -g 全局安装webpack  
    npm webpack -v 查看版本号  
    npm webpack -h 帮助  
    npm init -y 下载package.json（包含中文，要使用npm init）  
    npm install bootstrap@3  
    npm i //装packjson的包

[https_registry.npmjs.org]: https://registry.npmjs.org
[node_modules]: /images/20220416/7ca77413c13b4413894ae6df9a1d5119.png