webpack
webapck
高级白嫖工程师
我不是码神
展开
-
配置webpack本地服务
安装webpack-dev-servernpm i webpack-dev-server -D如下配置:devServer:{ hot:true, // 开启模块热替换 port:11888, // 指定端口 host:"0.0.0.0", // 指定地址 可以是0.0.0.0也可以是localhot compress:true, // 是否启用gzip压缩 },...原创 2021-12-22 13:35:21 · 259 阅读 · 0 评论 -
webpack打包时html模板设置
对于一些通过hash值设置了动态文件名等的文件,打包后如果需要按照特定的html模板生成最终的html文件,就需要使用插件HtmlWebpackPlugin。安装插件npm install --save-dev html-webpack-pluginwenbpack.config.js中如下配置module.exports = { // 所有插件配置都是在这里 plugins:[ new htmlWebpackPlugin() // 插件一般都是一个class 需要用new原创 2021-12-20 13:41:13 · 425 阅读 · 0 评论 -
webpack5打包静态资源配置
webpack5打包图片等资源比之前的版本要便捷,不需要配置那么多loader,只要配置asset-module-type即可。{ test:"/\.(png|jpg)$/", type:"asset", generator:{ filename:"[name]_[hash:4][ext]" // 指定文件名格式 }, parser:{ dataUrlCondition:{原创 2021-12-17 13:54:44 · 562 阅读 · 0 评论 -
webpack将部分图片打包后转化为base64
webpack将部分图片打包后转化为base64主要依靠url-loader实现。使用步骤:安装url-loader:npm install url-loader -Dwebpack配置{ test:"/\.(png|jpg|jpeg)$/", use:[ { loader:"url-loader", options:{ name:"[name]_[hash].原创 2021-12-17 13:35:40 · 2670 阅读 · 0 评论 -
webpack文件占位符placeholder的使用
webpack打包后的文件名配置实现:主要是通过file-loader提供的占位符去配置实现。常用的主要有下面这几个:[ext] :目标文件/资源的文件扩展名。[name] :文件/资源的基本名称。[hash]:指定生成文件内容哈希值的哈希方法。只需要在webpack.config中配置:module:{ // 配置使用的loader rules:[ { test: /\.css$/, use: ['style-loader','css-loader'] },原创 2021-12-17 13:21:43 · 416 阅读 · 0 评论