webpack

1.在webpack使用下载命令为例:

​
npm install jquery -S

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

​

-S(save)是下载完之后放在package.json的 dependencies 之中的在开发和开发完之后都用的到的标记

2.查询npm安装命令的时候,可以使用npm查找安装命令

 3.默认webpack设置是:

        使用npm run dev -->查找webpack配置压缩模式-->查找../src/index.js路径

        修改webpack配置

const path=require('path')
     module.exports={


    // mode代表webpack运行模式,development production
    mode:'development',
    entry:path.join(__dirname,'./src/index1.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js',
    }
}

        

4.npm install webpack-dev-server@3.11.2 -D下载自动更新js代码软件(会开启一个http服务器),之后配置

"scripts": {

    "dev": "webpack serve"

  },

按两次ctrl+c停止服务,npm run dev启动服务(tips:File是,http是互联网服务器协议,要用http  127.0.0.1:8080访问,http协议的端口是80则可以被省略,127.0.0.1是主机地址,80是端口),但是更新的webpack文件是放在内存中的,频繁的数据如果是放在磁盘会影响磁盘使用及寿命,放在内存之中可以快速更新

 <!-- <script src="../dist/bundle.js"></script> -->

    <script src="/bundle.js"></script>

第一个是刷新磁盘的文件数据

第二个script是刷新内存中的数据

5.

const path=require('path')

// 1.安装插件

const HtmlPlugin =require('html-webpack-plugin')

//2.设置配置

const htmlplugin= new HtmlPlugin({

    template:'./src/index.html',

    filename:'./index.html'

})



module.exports={

    // mode代表webpack运行模式,development production

    mode:'development',

// html-webpack-plugin使插件生效

    plugins:[htmlplugin],

// 导出webpack的js文件

    entry:path.join(__dirname,'./src/index1.js'),

    output:{

        path:path.join(__dirname,'./dist'),

        filename:'bundle.js',

    }

}

6.

Vue-cli @配置在setting.json中设置

 // 导入文件时是否携带扩展名

    "path-autocomplete.extensionOnImport": true,

    //配置@的路径提示

    "path-autocomplete.pathMappings": {

        "@":"${folder}/src"

    },

7.

npm i babel-loader@8.2.2 babel/core@7.14.6 babel/plugin-proposal-decorators@7.14.5 -D

处理webpack处理不了的js高级语法

 

 8.

 Bulid的 mode会默认覆盖

浏览器所使用的js文件是打包后的,使用sourcemap

 

9.

Webpack默认只会打包.js结尾的文件,处理css,less需要下载其他插件

npm i style-loader@3.0.0 css-loader@5.2.6 -D,把css文件导入main.js之中

 

 

webpack处理.js后缀文件的时候

 在module.exports={}之中

Webpack只能处理.js的文件,之后会去找webpack.config.js之中的

module:{

        rules:[

            {test:/\.css$/,use:['style-loader','css-loader']}

        ]

    }

.css文件会经过

'style-loader',(先)'css-loader' 这两个的处理,之后转交给引入的主函数.js文件,最后生成文件

当Img的图片转为base64位的时候,可以减少请求(请求img的时候直接请求图片,如果没有需要另外请求一次),提高优化速度,但是使用base64会使图片大小变大,适合使用小图片,不适合大图片(原始图)

下载图片的loader

npm i url-loader@4.1.1 file-loader@6.2.0 -D

把图片引入主函数模块之中,最后在html引入主函数.js