02---webpack基础用法

h960822

已于 2024-04-14 21:03:03 修改

阅读量433

点赞数 2

文章标签： webpack 前端 javascript

于 2024-04-04 10:16:14 首次发布

本文链接：https://blog.csdn.net/h960822/article/details/137357884

版权

01 entry打包的入口文件：

单入口entry是一个字符串:适用于单页面项目

module.exports = {

    entry:'./src/index.js'

}


多入口entry是一个对象

module.exports = {

    entry:{

        index:'./src/index.js',

        app:'./src/app.js'

    }

}

02 output打包的出口文件：

单入口配置

module.exports = {

    entry:'./src/index.js'

    output:{

    path:path.resolve(__dirname,'dist'),


    filename:'bundle.js'
}

}

多入口的配置 需要通过站位符【name】来进行站位，相当于是在dist输出两个出口的文件

module.exports = {

    entry:{

        app:'./src/app.js',

        index:'./src/index.js'
    }

    output:{

    path:path.resolve(__dirname,'dist'),


    filename:'[name].js'
}

}

03 loaders：webpack只支持js和json文件类型，loaders需要把其他文件进行转化为有效的模块

const path = require('path')

module.exports = {

 module:{

    rules:[  test指定对应的规则  use加载对应的loader

        {test:/\.txt$/,use:'raw-loader'}

    ]

 }

}

04 plugin插件的配置：

const path = require('path')

module.exports = {

    plugins:[  放到plugins的数组中

        new HtmlWebpackPlugin(

            {template:'./src/index.html'}
        
        )
    ]

}

05 modu：用来指定当前的构建环境：production development node

mode模式默认为production

设置 process.env.NODE_ENV的值为 development.开启NamedChunksPlugin和NamedModulesPlugin

设置 process.env.NODE_ENV的值为 production.开启FlagDependencyUsagePlugin 

,FlagIncludedchunksPluginModuleConcatenationPlugin 

,NoEmitOnErrorsPlugin0ccurrenceOrderPlugin,sideEffectsFlagPlugin和TerserPlugin。

none：不开启任何优化选项

06 解析ES6以及React JSX语法：

解析ES6---需要安装npm install @babel/core  @babel/preset-env  babel-loader -D
 
webpack.config.js配置 

modele.exports = {

    module:{

        rules:[

            {test:/\.js$/,use:'babel-loader'}
        
        ]

    }

}

bebel的配置文件是.babelrc 

{

    "presets":["@babel/preset-env"],

    "plugins":["@babel/plugin-proposal-class-properties"]
}



解析react jsx的语法： 需要再安装 npm i @babel/preset-react:

在 .babelrc文件中增加@babel/preset-react

{

    "presets":["@babel/preset-env","@babel/preset-react"],

    "plugins":["@babel/proposal-class-properties"]
}

07 react使用的案例：需要安装react react-dom插件, src创建search.js文件

search.js文件代码如下

import React from 'react'

import ReactDom from 'reacr-dom'

class Search extends React.Component {

   render(){

        return {


            <div>我是react</div>
        }

}

}

RactDom.render(<Search/>,document.getElementById('root'))

再执行 npm run build的命令在dist目录下会创建出一个search.js文件，index.html页面中引入文件

<html>

    <body>

        <div id='root'></div>

        <script src='./dist/search.js'></script>
    
    </body>

</html>

08 解析css与less，需要使用style-loader css-loader less-loader

module.exports = {

 module:{

    rules:[


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

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

}

09 解析图片与字体资源

module.exports = {

 module:{

    rules:[


        {test:/\.(png | svg | jpg | gif)$/,use:['file-loader']},

            
        {test:/\.(woff | woff2 | eot | ttf | otf)$/,use:['file-loader']}

        
         // 这里是解析base64        

        {test:/\.(png | svg | jpg | gif)$/,use:[{loader:'url-loader',options:  
       
        {limit:10240}}]},
        
    ]}
        
    ]
  }

}

10 webpack中的文件监听：源码发生变化自动构建输出新的文件；

1 第一种 在package.json文件中： 缺点 还需要自己手动刷新浏览器

“build”：“webpack --watch”  // 目前webpack5 已经可以实现浏览器自动更新了
  
 
2 第二种  在webpack.config.js中设置  

  module.exports = {

    watch:true, 

    watchOptions:{
 
         ignored:/node_modules, 

         aggregateTimeout:300,  监听到变化发生后300ms后再去执行
        
         poll:1000  判断文件是否发生变化 默认美妙访问1000次
   
    }

  }

11 webpack热更新。代码更新后会自动刷新浏览器不用手动刷新，需要借助webpack-dev-server

在package.json文件中进行配置：

"scripts":{

 "dev":"webpack-dev-server --open"

}

在webpack.config.js文件中配置

const webpack = require('webpack')

plugins:[

    new webpack.HotModuleReplacementPlugin()
],

devServer:{
 
 contentBase:'./dist',

 hot:true

}

12 文件指纹：打包输出的文件名会有一个后缀：<src="index_0123223db.js?bid=123">

hash:和整个项目的构建有关，只要项目文件有修改，整个项目构建的hash值会更改

chunkhash：和webpack打包的chunk有关 不同的entry会生成不同的chunkhash值

contenthash：根据文件内容来定义hash 文件内容不同contenthash不变

使用的方法 

js使用chunckhash  css使用contenthash  图片使用hash

modulle.exports = {

output:{

    filename:`[name]_[chunckhash:8].js`,

    path:__dirname+'/dist'
 
  }，

plugins:[

    new MiniCssExtractPlugin({

        filename:`[name]_[contenthash:8].css`
    })
]，

module:{

    rules:[

        {test:/\.(png | svg | gif)$/, use:[{loader:'file-loader', options:{name:`img/[name]_[hash:8].[ext]`}}]}
    ]

}

}

这里需要注意的是如果是要在dist目录下输出单独的css文件 需要将use:['style-loader'换成MiniCssExtractPlugin.loader]

13 代码压缩[html,css,js]

webpack内置了uglifyjs-webpack-plugin插件，打包后的代码会自动压缩js代码。


html的压缩：修改html-webpack-plugin 设置压缩的参数

module.exports = {

    entry:'./src/index.js',

    output:{

    path:__dirname+'/dist',

    filename:'[name]_[chunkhash:8].js'

    },

    plugins:[

        new HtmlWebpackPlugin({

            template:path.join(__dirname,'src/search.html'),

            filename:'search.html',

            chunks:['search'],

            inject:true,

            minify:{

                html5:true,

                collapseWhitespace:true,

                preserveLineBreaks:false,

                minifyCSS:true,

                minifyJS:true,

                removeComments:false

            }

        })

    ]

}



css的压缩需要使用optimize-css-assets-webpack-plugin和cssnano

module.exports = {

    entry:'./src/index.js',

    output:{

    path:__dirname+'/dist',

    filename:'[name]_[chunkhash:8].js'

    },

    plugins:[

        new OptimizeCssAssetsPlugin({

            assetNameRegExp:/\.css$g/,

            cssProcessor:require('cssnano')

        })

    ]

}

14 自动清理构建目录产物：每次构建的时候还需要手动的删除dist目录下的文件

借助与webpack的clean-webpack-plugin的插件每次构建可以自动删除dist目录的文件

module.exports = {

 plugins:[

        new CleanWebpackPlugin()
    
    ]

}